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.name下。结果应该是这样的：

我尝试调整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;});

如何在气泡图中放置文本？

1 个答案: