Question

如何在转换后访问d3点坐标？我意识到该点的x和y属性似乎没有实际改变，例如

d3.selectAll(".node")
    .each(function(d){console.log(d.y);}

返回转换前的y值

Answer 1

由于代码不存在，所以我将用一个例子来解释：

想象一下，你有和svg这样的小组：

var svgContainer = d3.select("body").append("svg").attr("id", "root")
                                     .attr("width", 200)
                                     .attr("height", 200).append("g");

让我们画一个圆圈：

 //Draw the Circle in the g group
 var circle = svgContainer.append("circle")
                          .attr("cx", 30)
                          .attr("cy", 30)
                         .attr("r", 20);

让我们给小组翻译100,200

svgContainer.attr("transform", "translate(100,200)");

所以现在翻译后圆圈中心点将出现在@ 130,230，即 circle的cx将是（30 + 100） circle的cy将是（200 + 30）

如果你检查圆圈的cx和cy，它将显示为30,30。

因此，为了在转换后找到位置，请执行以下操作：

d3.selectAll("circle")
    .forEach(function(d){
    var point = document.getElementById('root').createSVGPoint();//here roor is the svg's id
    point.x = d3.select(d[0]).attr("cx");//get the circle cx 
    point.y = d3.select(d[0]).attr("cy");//get the circle cy
    var newPoint = point.matrixTransform(d[0].getCTM());//new point after the transform
    console.log(newPoint);
});

工作代码here

希望这有帮助！

如何在变换后访问d3点坐标

1 个答案: