Question

0

35

Views

Adding multiple groups to radial D3 chart

Sorry if the title is misleading. Basically I have the following d3 chart:

Which is based on an array of 5 elements, each one containing 3 separate values. As you can see, the radial chart is grouped into 5 sections (with a gap) and then each section contains the 3 separate values as bar charts.

Here is a js fiddle: https://jsfiddle.net/kpu5o7v2/ And my data:

[
        {
            index: 0,
            name: "John",
            red: 35,
            green: 16,
            blue: 56
        },
        {
            index: 1,
            name: "Spencer",
            red: 12,
            green: 34,
            blue: 8
        },
        {
            index: 2,
            name: "Alice",
            red: 6,
            green: 6,
            blue: 70
        },
        {
            index: 3,
            name: "Cat",
            red: 12,
            green: 80,
            blue: 1
        },
        {
            index: 4,
            name: "Dave",
            red: 80,
            green: 1,
            blue: 2
        }
    ]

What I want to know, is how can I also add sections to correspond to the new_data.name value? ie. the wider groups. So I can then style them indivdually So, for example, for "John":

start angle is 0
end angle is the same end angle as John's blue section
radius is some number > largest subsection.

Below is an example (if you were to give this group a stroke):

3 months ago ·

Juan Pablo Isaza

1 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-05T12:28:56.506Z

I figured out the answer to this:

We need to add a new g to the SVG with the same new_data again
Create a new arc object for the names ("John", "Spencer", etc) instead of the keys ("red", "green", "blue")
Radius is y(ymax) where ymax is the largest value in all the data
start angle is just x0(name) (on a scale of 0 to 2PI)
end angle is the same as above + the width. Which is circumference/number of names.


  let arc2 = d3.arc()
    .innerRadius(innerRadius)
    .outerRadius((d) => {
      return y(ymax);
    })
    .startAngle(d => {
      return x0(d.name)
    })
    .endAngle(d => {
      //let circumference = 2* Math.PI;
      //let bandwidth = circumference/names.length;
      let endAngle = x0(d.name) + (x0.bandwidth() * 0.8);
      return endAngle;
    })
    .padAngle(0.01)
    .padRadius(innerRadius);

  svg.append("g")
    .selectAll("path")
    .data(new_data)
    .enter()
    .append("path")
    .attr('fill', d => {
      return "none";
    })
    .attr("stroke", "#333")
    .attr("stroke-width", 2)
    .attr("d", arc2);

New JS Fiddle: https://jsfiddle.net/kpu5o7v2/1/

Result: