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

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

1 个答案: