d3 javascript在圓上劃線

Question

我是新來的d3 javascript庫。我正在嘗試使用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/