Bootstrap获取div列的宽度(以像素为单位)

Question

我正在设置一个带引导程序的页面.我的布局工作得很完美,但其中一个元素是美国的可缩放地图(使用d3).我正在使用的缩放功能需要div的宽度和高度(以像素为单位),以便计算如何平移和缩放地图.我已经尝试过使用百分比,但我无法做到这一点.有没有办法动态获取div的高度和宽度.我已经搜索了所有搜索条件过于通用(或者我不够聪明,无法正确地说出来).

或者,如何获得必要的值.

这是我使用硬编码宽度和高度的实现(如果页面调整大小,则不起作用).

//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.

Answer 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