[Vuejs]-How to add an svg of donut to each node in place of circle in radial tree chart

by

0👍

The simplest way to to do this is to replace

 .join('circle')
 ...

With

 .join('g')
 ...

You still want to apply a transform to the g elements, as you did for the circles, though we can remove the rest of the styling attributes applied to the circles.

Now we have a selection of g elements with transforms that put [0,0] for each g where the center of each circle was.

If we want a pie chart or donut chart for each, we can use selection.each() to run code to append a pie chart for each circle, which could look like:

 selection.each(function(d) {  // d being the node datum.
    let g = d3.select(this) // our positioned g element.

    let pie = d3.pie() // setup a pie layout
       ... 

    let arc = d3.arc() // setup an arc generator
       ...

    g.selectAll(null)
     .data(pie(d.data.pieData) // pass property containing pie data to pie layout generator.
     .enter()
     .append("path")
     .attr("d", arc) // use arc generator
     .attr("fill", function(segmentDatum) { /* logic using segment's datum  */})
     ...
     
 })

Depending on how customized each pie is, you could remove either d3.pie or d3.arc setup out of the each function. The above assumes the datum for each node contains the data necessary for the pie (an array of values/object representing each segment – your sample data does not have this), and of course to make a donut chard you’ll want to set the innerRadius value of the arc as a value more than zero.

The way you have done your positioning of the circles means the pie/donut charts are rotated: not much of a problem if you don’t have text, but you could nest a child g with a counter rotation to hold the pie/donut.

Leave a comment