d3 Javascript zeichnen Linie über den Kreis

Question

Ich bin neu in d3 Javascript-Bibliothek. Ich versuche, mit d3 eine Linie über einen Kreis zu zeichnen. Ich kann einen Kreis erstellen, aber irgendwie erscheint die Linie nicht im Kreis. Siehe beigefügten Beispielcode. Jede Hilfe wird sehr geschätzt.

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

Auf den Punkt gebracht: Sie können kein Linienelement zu einem Kreis Element anhängen.

Wenn Sie Ihr SVG erstellen, müssen Sie wissen, welche Elemente ermöglichen, angehängte Kinder und welche Kinder sie haben können.

Lösung: Hier finden Sie die Linien an den SVG hängen müssen:

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"); 

Hier ist die aktualisierte Geige: https://jsfiddle.net/c58859xy/1/