Question

正如您在这里看到的元素g http://imgur.com/SZImQNB具有不同的浏览器缩放级别。我想获得这些值402x398和1608x1582或者缩放时的值。

var container - 是我正在寻找

维度的svg

var svg = d3.select("body")
                        .append("svg")
                        .attr("width", w)
                        .attr("height", h);

            svg.append('rect')
              .classed('bg', true)
              .attr('stroke', 'transparent')
              .attr('fill', 'transparent')
              .attr("x", 0)
              .attr("y", 0)
              .attr('width', w)
              .attr('height', h)
               .call(d3.behavior.zoom()
          .on("zoom", function() {

            container.attr("transform", "translate(" + d3.event.translate + 
              ")scale(" + d3.event.scale + ")");
          }));

            var container = svg.append("g")
                            .classed("node-area", true)
                            .attr("id", "test");

我正在使用container.node（）。getBBox（）。width来获取这些值，无论如何，我总是收到70像素宽度30像素高度。

console.log("width: "+container.node().getBBox().width+" height: "+container.node().getBBox().height+ "x: "+container.node().getBBox().x+" y: "+container.node().getBBox().y);

我正在关注d3.js force layout auto zoom/scale after loading TWiStErRob回答

Answer 1

@RobertLongson建议确实有效。在代码中，必须在转换后使用getBoundingClientRect().width：

function zoomed() {
    container.attr("transform", "translate(" + d3.event.translate 
    + ")scale(" + d3.event.scale + ")");
    console.log("width: "+container.node().getBoundingClientRect().width);
};

在应用缩放时检查此小提琴中的控制台：http://jsfiddle.net/gerardofurtado/tr4kx4af/

获取svg g元素的大小

1 个答案: