问题描述
我想在圆圈中加入一些文字。我一直下面的例子从
,但无法获得正确的输出。
I am trying to add some text into circle. I have been following example fromhttp://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将文本添加到圆圈的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!