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

您可以在http://jsfiddle.net/9tp1yun7/2/

查看更新后的JSFiddle

D3：将文本附加到圆圈，使其具有与圆形对象相同的优先级

1 个答案: