Geek Answers Handbook

Bootstrap get width of div column in pixels

I am creating a bootstrap page. I work fine, but one of the elements is a scalable map of the USA (using d3). The zoom function that I use requires the width and height of the div in pixels to calculate how to translate and scale the map. I tried to use interest, but I can not do anything. Is there a way to dynamically get the height and width of a div. I searched everything, but the search terms are too universal (or I'm not smart enough to formulate them correctly).

Alternatively, how else can I get the necessary values.

Here is my implementation using hard coded width and height (which will not work if the page changes).

//make the map element
    var width = 1000;
    var height = 1000;
    var svg = d3.select("#Map")
    .append("svg")
    .attr("id", "chosvg")
    .attr("height", height)
    //.attr("viewBox", "0 0 600 600")
    .attr("width", width)
    .style("preserveAspectRatio", "true");

    cbsa = svg.append("g");
d3.json("data/us-cbsa.json", function(json) {
    cbsa.selectAll("path")
        .attr("id", "cbsa")
        .data(json.features)
        .enter()
        .append("path") 
        .attr("class", data ? quantize : null) //data ? value_if_true : value_if_false -- ternary operator
        .attr("d", path)
        .on("click", clicked);
});

clicked(), , ,

        cbsa.transition()
        .duration(750)
        .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")")
        .style("stroke-width", 1.5 / k + "px");

- :   var width = column.width()// -,

html, .

+4
1

, :

var bb = document.querySelector ('#Map')
                    .getBoundingClientRect(),
       width = bb.right - bb.left;

bb width. , , svg , .

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

+6

More articles:


All Articles