如何在 d3.js 中创建三层甜甜圈图

Question

I'm using trying to create a multi-level donut chart in d3 version5 This image is drawn by d3 version3. it is working fine in version3. I decided to upgrade d3 to the latest version. now, donut chart is not drawn by d3(also no errors in the console)

D3 version 3 > version 5

---

Here is the sample dataset I used:

Hint: first value in the array is used storage and second is free storage

 {
    average: [30.012, 69.988],
    minimum: [10, 90],
    maximum: [40, 60]
}

Note: Above data is just a sample this is not exact data.

Here is the code I tried:

var width = 300;
var height = 300;
var radius = Math.floor((width / 6) - 2);

var classFn = function(a, b) {
    return a === 0 ? classes[b] : 'default';
};

var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc();

var svg = d3.select(selector).append("svg");
svg.attr("width", width);
svg.attr("height", height);
svg = svg.append("g");
svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
var path = gs.selectAll("path");
path = path.data(function(d) {
    return pie(d);
});
path.enter().append("path");
path.attr("class", function(d, i, j) {
    return classFn(i, j);
})
path.attr("d", function(d, i, j) {
    return arc.innerRadius((j === 0 ? 0 : 2) + radius * j).outerRadius(radius * (j + 1))(d);
});

Note: This code is working fine in d3 version3 .

Answer 1

2. Update :

I've updated the answer with a better solution. I didn't do this at first, because I didn't grasp you structure. I've updated it to being more D3 idiomatic. Plus it does away with the hack I made in my first update :)

    var dataset = {
      average: [0, 100],
      minimum: [0, 100],
      maximum: [0, 100]
    }

    var width = 300;
    var height = 300;
    var radius = Math.floor((width / 6) - 2);

    var pie = d3.pie().sort(null);
    var arc = d3.arc();

    var svg = d3.select('body').append("svg");
    svg.attr("width", width);
    svg.attr("height", height);
    svg = svg.append("g");
    svg.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

    var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");

    gs.each(function (d, j) {
      d3.select(this).selectAll('path')
        .data(pie(d)).enter()
        .append('path')
        .attr("class", function(d, i) {
          // return classFn(i);
        })
        .attr('d', function (d) {
          return arc
            .innerRadius((j === 0 ? 0 : 2) + radius * j)
            .outerRadius(radius * (j + 1))(d);
        })
    })

The updated code uses the index (here j ) that is available when appending the g elements, which corresponds to you original j index. This makes it possible to calculate the radii in the original way. To achieve this, the arc appending code is wrapped into a .each function that iterates over the g elements, making j available to us.

The class application should work as well, but I've commented it out, as the classFn function doesn't work, since the classes variable is not present.

1. Update :

Besides the original answer, when calculating the arc radii you rely on a j value that is different from D3 v3 and v5. I summise that j is used the index of the d3.values array, so I've cooked up a way to reverse look-up that index based on the input values.

First create a map for reverse mapping data values into their corresponding index:

var dataValueJoinChar = '¤'
var datasetValuesToIndex = d3.values(dataset).reduce((acc, curr, i) => {
  acc[`0${dataValueJoinChar}${curr[0]}`] = i
  acc[`1${dataValueJoinChar}${curr[1]}`] = i
  return acc
}, {})

Then change the last part of your code to:

path = path.data(function(d) {
  return pie(d);
}).enter().append("path");

path.attr("class", function(d, i, j) {
  return classFn(i, j);
})

path.attr("d", function(d, i, j) {
  var orgIndex = datasetValuesToIndex[`${i}${dataValueJoinChar}${d.data}`]
  return arc
    .innerRadius((orgIndex === 0 ? 0 : 2) + radius * orgIndex)
    .outerRadius(radius * (orgIndex + 1))(d);
});

It might not be too pretty, but it's a simple adaption of your code that works.

------- Original answer --------

In D3 v5 pie and arc are found at d3.pie and d3.arc respectively. Therefore, try changing:

var pie = d3.layout.pie().sort(null);
var arc = d3.svg.arc();

To this instead:

var pie = d3.pie().sort(null);
var arc = d3.arc();

Pie API reference: https://github.com/d3/d3-shape/blob/v1.3.4/README.md#pie

Arc API reference: https://github.com/d3/d3-shape/blob/v1.3.4/README.md#arc

If you use a bundler to bundle sub-modules, both are part of the d3-shape module. If not they are both available in the full D3 library.

Hope this helps!