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

我使用bootstrap设置页面。我的布局完美，但其中一个元素是美国的可缩放地图（使用d3）。我正在使用的缩放功能需要以像素为单位的div的宽度和高度，以便计算如何翻译和缩放地图。我试过使用百分比，但是我无法得到任何东西。有什么方法可以动态获取div的高度和宽度。我已经搜遍遍了，但搜索词语太泛化了（或者我不够聪明，无法正确描述）。Bootstrap以像素为单位获取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); 
});

在点击（）函数

，我有这样其运作变焦，但只有具有一定窗口宽度

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

为清楚起见，我非常loooking这样的事情： var width = column.width（）//或使用百分比的东西

如果有帮助，我可以包含我的html。

来源

2016-06-24 Alec Daling

请包括HTML代码，以及调试容易 –

对不起，我知道我应该有。谢谢，philipp的方法奏效，但我一定会下一次。 –

ohp np亚历克Daling ...好它现在工作正常:) –

你可以通过调用获取列的宽度：

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

来源

2016-06-24 04:51:08 philipp

这样做了！非常感谢你，我不认为我会自己找到。这实际上非常有用。 –

Upvoted ...但嘿....我想它的getBoundingClientRect（）.....不getClientBoundingRect（）。复制粘贴的人可能会划伤他们的脑袋.......-D –

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

回答

相关问题