d3 add text to circle

Question

I am trying to add some text into circle  I have been following example from a mbostock tutorial  but wasn t able to get the right output   The code snippet is   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

User · Answer

Extended the example above to fit the actual requirements, where circled is filled with solid background color, then with striped pattern & after that text node is placed on the center of the circle.

_x000D_

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

_x000D_

.node-group {_x000D_
  fill: #ffffff;_x000D_
}

_x000D_

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

_x000D_

Output:

Below is the link to codepen also:

See the Pen D3-Circle-Pattern-Text by Manish Kumar (@mkdudeja) on CodePen.

Thanks, Manish Kumar

User · Answer

Here s a way that I consider easier   The general idea is that you want to append a text element to a circle element then play around with its  dx   and  dy  attributes until you position the text at the point in the circle that you like  In my example  I used a negative number for the dx since I wanted to have text start towards the left of the centre    const nodes      id  ABC  group  1  level  1    id XYZ  group  2  level  1      const nodeElems   svg append  g    selectAll  circle    data nodes   enter   append  circle    attr  r  radius   attr  fill   getNodeColor   const textElems   svg append  g    selectAll  text    data nodes   enter   append  text    text node   gt  node label   attr  font-size  8   font size  attr  dx   -10   positions text towards the left of the center of the circle  attr  dy  4

User · Answer

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 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    The main code is    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        and the json file is      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 encapsulation you want    lt svg width  960  height  500  gt       lt g transform  translate 80 80   gt           lt circle r  40  stroke  black  fill  white  gt  lt  circle gt           lt text dx  -20  gt Node 1 lt  text gt       lt  g gt       lt g transform  translate 200 80   gt           lt circle r  60  stroke  black  fill  white  gt  lt  circle gt           lt text dx  -20  gt Node 2 lt  text gt       lt  g gt       lt g transform  translate 380 80   gt           lt circle r  80  stroke  black  fill  white  gt  lt  circle gt           lt text dx  -20  gt Node 3 lt  text gt       lt  g gt   lt  svg gt

[javascript] d3 add text to circle

Examples related to javascript

Examples related to svg

Examples related to d3.js