时间戳

首页 > 解决方案 > 如何在气泡图中定位文本？

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类，但它不影响文本的定位。

我怎样才能做到这一点？

标签： javascriptd3.js

解决方案

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

推荐阅读