d3 javascript draw line over circle

Question

Я новичок в d3 javascript library. Я пытаюсь провести линию по кругу с помощью d3. Я могу создать круг, но как-то линия не появляется на круге. См. Пример кода. Любая помощь высоко ценится.

diag_circles.data(circle_data) 
      .enter() 
      .append("circle") 
      .attr("cx", function (d) { 
       console.log("d.x", d.x); 
       return d.x 
      }) 
      .attr("cy", function (d) { 
       return d.y 
      }) 
      .attr("r", function (d) { 
       return d.r 
      }) 
      .append('line') 
      .attr("x1", function(d){return d.x- d.r}) 
      .attr("y1", function(d){return d.y}) 
      .attr("x2", function (d) { return d.x+ d.r}) 
      .attr("y2", function(d){return d.y}) 
      .attr("stroke-width", 20) 
      .attr("stroke", "black"); 

https://jsfiddle.net/c58859xy/

Answer 1

В двух словах: вы не может добавить элемент строки к окружности элемента.

При создании вашего SVG вы должны знать , какие элементы позволяют добавить детей и детей, которых они могут иметь.

Решение: Вы должны добавить строки в SVG:

var lines = svg.selectAll('line') 
    .data(circle_data) 
    .enter() 
    .append("line") 
    .attr("x1", function(d){return d.x- d.r}) 
    .attr("y1", function(d){return d.y}) 
    .attr("x2", function (d) { return d.x+ d.r}) 
    .attr("y2", function(d){return d.y}) 
    .attr("stroke-width", 20) 
    .attr("stroke", "black"); 

Вот дополненная скрипку: https://jsfiddle.net/c58859xy/1/