D3 add text to the circle

Question

I am trying to add text to a circle. I gave an example from http://mbostock.github.com/d3/tutorial/circle.html , but could not get the correct result.

Code snippet:

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 on how to get this working? Thank you very much!

Answer 1

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

The main idea is to encapsulate the text and the circle in the same “ div ” as in html, so that the logo and company name match the same div in the page title,

Main code:

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

and json file:

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

The resulting html code shows the required encapsulation:

 <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

Enlarge the above example so that it matches the actual requirements, where the circle is filled with a solid background, then with a striped pattern and after that the node text is placed in the center of the circle.

 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="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> 

Output:

Below is a link to codepen also:

See Pen D3-Circle-Pattern-Text Manisha Kumara ( @mkdudeja ) on CodePen .

Thank you Manish Kumar

Answer 3

Perhaps take a step back and drop json until you grab onto the theory.

http://tributary.io/inlet/4132672/ (live example provided by enjalot in this video . I highly recommend checking out the other d3 videos he has.