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

Question

使用 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.名称。结果应该是这样的:

我尝试调整 nodevalue 类，但它并没有影响文本的位置。

我怎样才能实现这个目标？

Answer 1

您可以使用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;});