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列的寬度

回答

相關問題