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

我可以将文字添加到我的草图中，但如果我可以将文字直接附加到圆圈中，我会喜欢它。这意味着，如果一个圆圈被另一个圆圈覆盖，文本也会被覆盖。在更高的层面上，我发现d3模型很难以一种使对象可以与不同形状组合的方式来构造对象，等等。代码似乎非常程序化，这意味着任何提示都会得到极大的重视：）

---

按照您现在编写代码的方式，将首先添加所有行，然后添加所有圆，最后添加文本。SVG将始终将稍后添加的元素放在顶部。所以，为了实现你想要的，你需要将他们分组。为此，您需要为数据的每个元素添加一个

g

元素

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

现在，您可以将

行

、

圆圈

和

文本

添加到其中

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

您可以在以下位置查看更新的JSFIDLE

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