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/