d3.js加入旋转组与行

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/