Question

这是我目前所拥有的jsbin。我在右侧有一个旋转组，模拟圆周转动的圆圈。该组左侧的不同组中有一条垂直线。

我想要实现的是在组旋转时将小圆圈连接到垂直线的水平线。

这怎么可能？

Answer 1

如果我理解正确你只需要像这样更新线的x2，y2位置：

 d3.select('.outsideline').attr('x1', 0)
            .attr('y1', 20).attr('x2', circleOutsideCo.left-140)
            .attr('y2', circleOutsideCo.top-215)

这些更新时使用getClientBoundingBox()制定的圆圈坐标：

 var circleOutside = document.getElementsByClassName('circle-guide')[0];
     circleOutsideCo = circleOutside.getBoundingClientRect();

注意我也有硬编码。这些是为了弥补利润等。

添加了一些东西，行等的类名，但这里是一个更新的小提琴（我宁愿使用它而不是JSBin：P个人偏好）：https://jsfiddle.net/thatOneGuy/L5dc8guf/

重新阅读你的问题。你想让那条外线留在那里并创造另一个和外圈的联合。我刚刚添加了另一行：

 sineWaveGroup.append('line')
    .attr('x1', 0)
    .attr('y1', 20)
    .attr('x2', 0)
    .attr('y2', 200)
    .style('stroke', 'steelblue').attr('class', 'joiningLine');

在选择中使用了这个不同的类：

 d3.select('.joiningLine').attr('x1', 0) ....

更新了小提琴：https://jsfiddle.net/thatOneGuy/L5dc8guf/2/

编辑3

我看了你的评论。你想让它上下起伏。然后只需更新y1位置。更新了小提琴：https://jsfiddle.net/thatOneGuy/L5dc8guf/3/

d3.js用线连接旋转组

1 个答案: