Question

所以我有两个圈子，sustainabilityCircle和一个被this引用的圈子。我将变换应用于两个圆圈，如下所示：

    d3.select(this).transition()
    .duration(750)
    .attr("transform", "translate(" + d3.select(this).attr("originX") + "," + d3.select(this).attr("originY") + ")scale(" + scaler + ")translate(" + -d3.select(this).attr("cx") + "," + -d3.select(this).attr("cy") + ")")
    .style("stroke-width", 1.5 / scaler + "px");

    sustainableCircle.transition()
    .duration(750)
    .attr("transform", "translate(" + -.6*sustainableCircle.attr("cx") + "," + -.6*sustainableCircle.attr("cy") + ")scale(" + .3*scaler + ")")

现在我尝试创建一条从this圆的中心点开始的行，并在sustainableCircle的中心点结束。显然，因为我们已经完成了翻译，所以下面的代码不起作用：

      var newCLine = svg.append("line").attr({
        x1: d3.select(currentCircle).attr("cx"),
        y1: d3.select(currentCircle).attr("cy"),
        x2: sustainableCircle.attr("cx"),
        y2: sustainableCircle.attr("cy"),
        opacity: 1,
        stroke: "black"
      });

访问我圈子的新cx和cy位置需要执行哪些操作？作为参考，我使用的是d3 v3.5.17

Answer 1

我建议不要设置cx / cy属性设置，然后设置translating圈子。只需使用一种设置位置的方法来简化您的生活。

那就是说，你要找的位置应该是：

var cc = d3.select(currentCircle),
    cc_trans = d3.transform(cc.attr("transform")),
    cc_x = +cc.attr('cx') + trans.translate[0],
    cc_y = +cc.attr('cy') + trans.translate[1],
    sc_trans = d3.transform(sustainableCircle.attr("transform")),
    sc_x = +sustainableCircle.attr('cx') + sc_trans.translate[0],
    sc_y = +sustainableCircle.attr('cy') + sc_trans.translate[1];

var newCLine = svg.append("line").attr({
    x1: cc_x,
    y1: cc_y,
    x2: sc_x,
    y2: sc_y,
    opacity: 1,
    stroke: "black"
  });

翻译后找几个圆圈新cx，cy

1 个答案: