d3添加文字圈

我正在试图添加一些文字到圈子里。 我一直在从http://mbostock.github.com/d3/tutorial/circle.html下面的例子，但无法得到正确的输出。

代码片段是：

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

任何build议如何获得这项工作？ 非常感谢！

Answer 1

这里是一个例子，显示一些来自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 dr} ) .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> 

Answer 2

对上面的例子进行了扩展，以适应实际的要求，圆圈填充了纯色的背景色，然后是条纹图案，然后将文本节点放置在圆圈的中心。

 var width = 960, height = 500, json = { "nodes": [{ "x": 100, "r": 20, "label": "Node 1", "color": "red" }, { "x": 200, "r": 25, "label": "Node 2", "color": "blue" }, { "x": 300, "r": 30, "label": "Node 3", "color": "green" }] }; var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height) svg.append("defs") .append("pattern") .attr({ "id": "stripes", "width": "8", "height": "8", "fill": "red", "patternUnits": "userSpaceOnUse", "patternTransform": "rotate(60)" }) .append("rect") .attr({ "width": "4", "height": "8", "transform": "translate(0,0)", "fill": "grey" }); function plotChart(json) { /* Define the data for the circles */ var elem = svg.selectAll("g myCircleText") .data(json.nodes) /*Create and place the "blocks" containing the circle and the text */ var elemEnter = elem.enter() .append("g") .attr("class", "node-group") .attr("transform", function(d) { return "translate(" + dx + ",80)" }) /*Create the circle for each block */ var circleInner = elemEnter.append("circle") .attr("r", function(d) { return dr }) .attr("stroke", function(d) { return d.color; }) .attr("fill", function(d) { return d.color; }); var circleOuter = elemEnter.append("circle") .attr("r", function(d) { return dr }) .attr("stroke", function(d) { return d.color; }) .attr("fill", "url(#stripes)"); /* Create the text for each block */ elemEnter.append("text") .text(function(d) { return d.label }) .attr({ "text-anchor": "middle", "font-size": function(d) { return dr / ((dr * 10) / 100); }, "dy": function(d) { return dr / ((dr * 25) / 100); } }); }; plotChart(json); 

 .node-group { fill: #ffffff; } 

 <script src="ajax/libs/d3/3.4.11/d3.min.js"></script> 

Answer 3

也许，退后一步，直到你掌握理论。

http://tributary.io/inlet/4132672/ （现场实例，由enjalot在本video中介绍，我强烈build议您查看他拥有的其他d3video。