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

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

Extended the example above to fit the actual requirements  where circled is filled with solid background color  then with striped pattern  amp  after that text node is placed on the center of the circle    x000D   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   lt script src  https   cdnjs cloudflare com ajax libs d3 3 4 11 d3 min js  gt  lt  script gt  x000D   x000D   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 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