Text on a path (circle) array of values

Community Help
1

Hello,

I am trying to create a bubblechart(?), I can get the shapes drawn and all that but for whatever reason the text isn’ t showing up. This is the code:

{
  function circlePath(cx, cy, r, ){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
  };
  const svg = d3.select(DOM.svg(400, 200));
  const summaries = data_circles.map(location => ([location.num_locs, location.total, location.num_samps, location.ave_dense, location.location, 25]));
  const bubbles = svg.selectAll("g").data(summaries).enter()
      .append("g");
  bubbles.append("path")
      .attr('d', function(d,i) {return circlePath(100+(i*100), 100, 50)})
      .attr("fill", "blue")
      .attr("id",  d => (d.pathid = DOM.uid(d[4]).id));
  // bubbles.append("defs").append("path")
  //     .attr('d', function(d,i) {return circlePath(100+(i*100), 100, 48)})
  //     .attr("id",  d => (d.pathid = DOM.uid(d[4]).id));
  bubbles.append("text")
      .attr("font-size", "20px")
      .attr("font-weght", "bold")
      .attr("font-family", "sans")
      .attr("color", "black")
      .attr("dx", "0")
      .attr("dy", "0")
      .append("textPath")
      .attr("xlink:xlink:href", d => '#' + d.pathid)
      .text("name");
                           
  return svg.node();
}

It is returning this value:

<svg viewBox="0,0,400,200" width="400" height="200">
  <g>
    <path d="M 100 100 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0" fill="blue" id="O-Aare-7"></path>
    <text font-size="20px" font-weght="bold" font-family="sans" color="black" dx="0" dy="0">
      <textPath xlink:href="#O-Aare-7">name</textPath>
    </text>
  </g>
  <g>
    <path d="M 200 100 m -50, 0 a 50,50 0 1,0 100,0 a 50,50 0 1,0 -100,0" fill="blue" id="O-Rhein-8"></path>
    <text font-size="20px" font-weght="bold" font-family="sans" color="black" dx="0" dy="0">
      <textPath xlink:href="#O-Rhein-8">name</textPath>
    </text>
  </g>
</svg>

Like I said the circles show up but not the text. There are 136 bubbles(?)

So where I am going wrong?

2

You should use uid.href to create the href attribute, rather than formatting the href attribute manually as #${uid.id}. If you use uid.href, then you’ll get an absolute href, which will work on all browsers (rather than just Chrome).

Here’s an example:

3

Okay I am not understanding implementation here:

I get your example but the “id” and " href" are being dynamically created in my use case. Or rather the “id” is being dynamically created so how do I do that. Here:

{
      function circlePath(cx, cy, r, ){
        return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
      };
     const svg = d3.select(DOM.svg(400, 200));
     **const summaries = data_circles.map(location => ([location.num_locs, location.total, location.num_samps, location.ave_dense, location.location, 25]));//<---- the "id" == summaries[4]**
  const bubbles = svg.selectAll("g").data(summaries).enter()
      .append("g");
  **const pathId = DOM.uid(d => (d[4].id));//<---- This does not work!**

  bubbles.append("path")
      .attr('d', function(d,i) {return circlePath(100+(i*100), 100, 50)})
      .attr("fill", "blue")
      **.attr("id",  pathId);//<---- call to dynamically created id**
  bubbles.append("text")
      .attr("font-size", "20px")
      .attr("font-weght", "bold")
      .attr("font-family", "sans")
      .attr("color", "black")
      .attr("dx", "0")
      .attr("dy", "0")
      .append("textPath")
      **.attr("xlink:xlink:href", pathId.href)//<---- call to uid href**
      .text("name");
                           
  return svg.node();
}

here is the note book if that helps:

Sorry to be a pest :neutral_face:

4

Here’s a modification to the cell somewhat along the lines of what you were doing which works. In short, I create an id using DOM.uid(d[4]) for each element of summaries, and store it under the key DOMuid in each of the entries in summaries. Then I just use that key to get the id and its href when putting together the svg:

{
  function circlePath(cx, cy, r, ){
    return 'M '+cx+' '+cy+' m -'+r+', 0 a '+r+','+r+' 0 1,0 '+(r*2)+',0 a '+r+','+r+' 0 1,0 -'+(r*2)+',0';
  };
  const svg = d3.select(DOM.svg(400, 200));
  const summaries = data_circles.map(location => ([location.num_locs, location.total, location.num_samps, location.ave_dense, location.location, 25]));
  const bubbles = svg.selectAll("g").data(summaries).enter()
      .append("g");
  summaries.forEach((d) => { d.DOMuid = DOM.uid(d[4]) });
  bubbles.append("path")
      .attr('d', function(d,i) {return circlePath(100+(i*100), 100, 50)})
      .attr("fill", "blue")
      .attr("id",  (d) => d.DOMuid.id);
  // bubbles.append("defs").append("path")
  //     .attr('d', function(d,i) {return circlePath(100+(i*100), 100, 48)})
  //     .attr("id",  d => (d.pathid = DOM.uid(d[4]).id));
  bubbles.append("text")
      .attr("font-size", "20px")
      .attr("font-weght", "bold")
      .attr("font-family", "sans")
      .attr("color", "black")
      .attr("dx", "0")
      .attr("dy", "0")
      .append("textPath")
      .attr("xlink:xlink:href", (d) => d.DOMuid.href)
      .text("name");
                           
  return svg.node();
}
1 Like
5

Perfect! Thanks…

1 Like