D3：將文字附加到圓上，使其具有與圓形對象相同的優先級

Question

我可以將素材添加到素描中，但是如果可以將文字直接附加到圓形上，我希望能夠添加文字。這意味着如果一個圓圈被另一個圓圈覆蓋，文字也會如此。在更高層次上，我發現d3模型很難用於構建物體的方式，使得它們可以用不同形狀組合，等等。代碼看起來非常程序化，所以任何提示都會被大大推翻:)

JSFiddle link

 var link = "https://api.github.com/orgs/csci-4830-002-2014/repos" 
     d3.json(link, function(error, data) { 
     var w = 10000; 
     var h = 1000; 

     var svg = d3.select("body") 
        .append("svg") 
        .attr("width", w) 
        .attr("height", h); 

     svg.selectAll("line") 
      .data(data) 
      .enter() 
      .append("line") 
      .attr("x1", 5) 
      .attr("y1", 5) 
      .attr("x2", function (d,i){ 
       return 30*d.forks_count; 
      }) 
      .attr("y2", function (d,i){ 
       return 30*d.open_issues_count; 
      }) 
      .attr("stroke-width", 2) 
      .attr("stroke", "black"); 


     svg.selectAll("circle") 
      .data(data) 
      .enter() 
      .append("circle") 
      .attr("r", 40) 
      .attr("cx", function(d){ return 30*d.forks_count; }) 
      .attr("cy", function(d){ return 30*d.open_issues_count; }) 
      .attr("stroke", "black") 
      .attr("stroke-width", 2) 
      .attr("fill", "white") 

     svg.selectAll("text") 
      .data(data) 
      .enter() 
      .append("text") 
      .attr("dx", function(d,i){ return 30*d.forks_count; }) 
      .attr("dy", function(d,i){ return 30*d.open_issues_count; }) 
      .text(function(d){ 
      if (d.name.indexOf("challenge") != -1) 
       return "C"; 
      else 
       return "H"; 
      }); 
     }); 

Answer 1

與您的代碼編寫，現在的樣子，所有的線將首先加入，然後所有的圈子，最後文本。 SVG將始終將元素添加到最後。所以要達到你想要的，你需要將它們分組。要做到這一點，你將需要添加一個g元素爲您的數據

var element = svg.selectAll(".element") 
    .data(data) 
    .enter() 
    .append("g") 
    .attr("class","element"); 

的每個元素現在，您可以添加line，circle，並且text它

element.append("line") 
    .attr("x1", 5) 
    .attr("y1", 5) 
    .attr("x2", function (d, i) { 
     return 30 * d.forks_count; 
    }) 
    .attr("y2", function (d, i) { 
     return 30 * d.open_issues_count; 
    }) 
    .attr("stroke-width", 2) 
    .attr("stroke", "black"); 


element.append("circle") 
    .attr("r", 30) 
    .attr("cx", function (d) { 
     return 30 * d.forks_count; 
    }) 
    .attr("cy", function (d) { 
     return 30 * d.open_issues_count; 
    }) 
    .attr("stroke", "black") 
    .attr("stroke-width", 2) 
    .attr("fill", "white") 

element 
    .append("text") 
    .attr("dx", function (d, i) { 
     return 30 * d.forks_count; 
    }) 
    .attr("dy", function (d, i) { 
     return 30 * d.open_issues_count+6; 
    }) 
    .style("text-anchor", "middle") 
    .text(function (d) { 
     if (d.name.indexOf("challenge") != -1) return "C"; 
     else return "H"; 
    }); 

您可以檢查更新JSFiddle at http://jsfiddle.net/9tp1yun7/2/