Javascript 如何在气泡图中定位文本？

使用d3.js v3，我制作了以下气泡图：

d3.json(JSON_URL, function(data) {

    data = JSON.parse(data)
    var nodes = pack.nodes(data);
    var node = canvas.selectAll(".node")
        .data(nodes)
        .enter()
        .append("g")
            .attr("class", "node")
            .attr("transform", function (d) { return "translate(" + d.x + ","+ d.y + ")" ;});

    node.append("circle")
        .attr("r", function(d) {return d.r; })
        .attr("fill", function (d, i) {return d.children ? "#fff" : color(i)})
        .attr("opacity", 0.25)
        .attr("stroke-width", "2");


    node.append("text")
        .text(function(d) {return d.children ? "" : d.name ;})
        .attr("text-anchor", "middle")
        .attr("class", "nodetext")
        .attr("data-classname", function(d) {return d.className;})
        .attr("style", function(d) {return "font-size:" + d.r/4;})
        .on("click", function(d) { window.open("https://twitter.com/hashtag/" + d.name.trim() + "\?src=hash"); })
        .on("mouseover", function(d) {
              d3.select(this).attr("r", 10).style("fill", "#2f4cff");
              d3.select(this).style("cursor", "pointer"); 

            })                  
        .on("mouseout", function(d) {
          d3.select(this).attr("r", 5.5).style("fill", "#000");
        });



    //problem here    
    node.append("text")
        .text(function(d) {return d.children ? "" : d.value ;})
        .attr("text-anchor", "middle")
        .attr("class", "nodevalue")
        .attr("data-classname", function(d) {return d.className;})
        .attr("style", function(d) {return "font-size:" + d.r/4;});

}) ;

这一切都很好，希望

d.value

的文本与

d.name

的文本重叠，而我希望它们位于

d.name

之下。结果应该是这样的：

我试图调整

nodevalue

类，但它没有影响文本的位置

---

我怎样才能做到这一点

您可以使用

y

属性垂直定位文本。您的代码有点难以测试，因为我们无法访问您的json，因此盲目地将文本部分的代码设置为：

node.append("text")
    .text(function(d) {return d.children ? "" : d.name ;})
    .attr("text-anchor", "middle")
    .attr("class", "nodetext")
    .attr("data-classname", function(d) {return d.className;})
    .attr("style", function(d) {return "font-size:" + d.r/4;})
    .on("click", function(d) { window.open("https://twitter.com/hashtag/" + d.name.trim() + "\?src=hash"); })
    .on("mouseover", function(d) {
          d3.select(this).attr("r", 10).style("fill", "#2f4cff");
          d3.select(this).style("cursor", "pointer"); 

        })                  
    .on("mouseout", function(d) {
      d3.select(this).attr("r", 5.5).style("fill", "#000");
    });

node.append("text")
    .text(function(d) {return d.children ? "" : d.value ;})
    .attr("text-anchor", "middle")
    .attr("class", "nodevalue")
    .attr("y", 15) // adding y attribute to offset vertically your text
    .attr("data-classname", function(d) {return d.className;})
    .attr("style", function(d) {return "font-size:" + d.r/4;});

---

是的，这是可行的，但

y的固定值会导致问题。当气泡很小时，它是好的，但对于大气泡，它仍然与上面的线重叠。我怎样才能解决这个问题？是的，这是我害怕的，但不能真正测试它。您可以根据气泡的大小使用y属性。类似于：
attr（“y”，d=>d.r*2）
这会从气泡中呼出值。我尝试了这一个，效果很好：
.attr（“y”，函数（d）{return d.r/5+15；}）