javascript - d3将文字添加到圈子

我正在尝试将一些文本添加到圈子中。我一直在跟踪a mbostock tutorial的示例，但无法获得正确的输出。

该代码段是:

var data;
var code;

d3.json("/json/trace.json", function(json) {
  data = json;
  console.log(data);
  // get code for visualization
  code = data["code"];
  alert(code);
  var mainSVG = d3
    .select("#viz")
    .append("svg")
    .attr("width", 900)
    .attr("height", 900);
  mainSVG
    .append("circle")
    .style("stroke", "gray")
    .style("fill", "white")
    .attr("r", 100)
    .attr("cx", 300)
    .attr("cy", 300);
  circle = mainSVG.selectAll("circle").data([code]);
});

对如何进行这项工作有什么建议吗？

最佳答案

这是一个示例，用圆圈显示一些文本，其中包含来自json文件:http://bl.ocks.org/4474971的数据。给出以下内容:

这背后的主要思想是将文本和圆圈封装在相同的“div”中，就像在html中所做的那样，以在页面页眉中将徽标和公司名称包含在相同的div中。

主要代码是:

var width = 960,
    height = 500;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)

d3.json("data.json", function(json) {
    /* Define the data for the circles */
    var elem = svg.selectAll("g")
        .data(json.nodes)

    /*Create and place the "blocks" containing the circle and the text */
    var elemEnter = elem.enter()
        .append("g")
        .attr("transform", function(d){return "translate("+d.x+",80)"})

    /*Create the circle for each block */
    var circle = elemEnter.append("circle")
        .attr("r", function(d){return d.r} )
        .attr("stroke","black")
        .attr("fill", "white")

    /* Create the text for each block */
    elemEnter.append("text")
        .attr("dx", function(d){return -20})
        .text(function(d){return d.label})
})

和json文件是:

{"nodes":[
  {"x":80, "r":40, "label":"Node 1"},
  {"x":200, "r":60, "label":"Node 2"},
  {"x":380, "r":80, "label":"Node 3"}
]}

生成的html代码显示所需的封装:

<svg width="960" height="500">
    <g transform="translate(80,80)">
        <circle r="40" stroke="black" fill="white"></circle>
        <text dx="-20">Node 1</text>
    </g>
    <g transform="translate(200,80)">
        <circle r="60" stroke="black" fill="white"></circle>
        <text dx="-20">Node 2</text>
    </g>
    <g transform="translate(380,80)">
        <circle r="80" stroke="black" fill="white"></circle>
        <text dx="-20">Node 3</text>
    </g>
</svg>