d3将文本添加到圆圈 [英] d3 add text to circle

问题描述

我想在圆圈中加入一些文字。我一直下面的例子从
http://mbostock.github.com/d3 /tutorial/circle.html ，但无法获得正确的输出。

I am trying to add some text into circle. I have been following example from http://mbostock.github.com/d3/tutorial/circle.html but wasn't able to get the right output.

代码段为：

    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]);

    }) ;

任何建议如何获得这项工作？
非常感谢。

Any suggestions how to get this work ? Thanks a lot!

推荐答案

这里是一个示例，显示一些文本在一个json文件中的数据： a href =http://bl.ocks.org/4474971 =noreferrer> http://bl.ocks.org/4474971 。其中包含以下内容：

Here is an example showing some text in circles with data from a json file: http://bl.ocks.org/4474971. Which gives the following:

这背后的主要思想是将文本和圆圈封装在同一个 div 在html中，在页眉中的相同 div 中具有标志和公司名称。

The main idea behind this is to encapsulate the text and the circle in the same "div" as you would do in html to have the logo and the name of the company in the same div in a page header.

主要代码是：

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代码显示您想要的封装：

The resulting html code shows the encapsulation you want:

<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>

这篇关于d3将文本添加到圆圈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！