D3同心/嵌套甜甜圈图表(D3 Concentric/Nested Donut Chart)

我创建了一个带有D3的圆环图，它使用了两个数据集，并为每个数据集显示略微不同的大小环。我想为数据集添加标签（对于图例），但selectAll("path")期望每个数据集都是一个简单的值数组，因此我无法添加标签。

下面是我到目前为止的代码和一个小提琴：

小提琴

I have created a donut chart with D3 that uses two data sets and displays slightly different size rings for each. I would like to add labels to the data set(for a legend), but the selectAll("path") expects each data set to be a simple array of values, so I have been unable to add the labels.

Below is the code I have so far and a fiddle:

Fiddle

最满意答案

期望每个数据集都是一个简单的值数组

这不是真的。您可以而且应该使用一组对象。然后使用值访问器为pie函数定位对象的属性。以下是我重新编写代码的方法：

        var dataset = {
          apples: [{
            value: 13245,
            color: '#1352A4',
            label: 'one'
          }, {
            value: 28479,
            color: '#5D9CEC',
            label: 'two'
          }, {
            value: 11111,
            color: '#1352A4',
            label: 'three'
          }, {
            value: 11000,
            color: '#A4C7F4',
            label: 'four'
          }, {
            value: 3876,
            color: '#DBE8FB',
            label: 'five'
          }],
          oranges: [{
            value: 53245,
            color: '#58A53B',
            label: 'one'
          }, {
            value: 28479,
            color: '#83C969',
            label: 'two'
          }, {
            value: 19697,
            color: '#A8D996',
            label: 'three'
          }, {
            value: 24037,
            color: '#CDE9C3',
            label: 'four'
          }, {
            value: 19654,
            color: '#E6F4E1',
            label: 'five'
          }]
        };

        var width = d3.select('#duration').node().offsetWidth,
          height = 300,
          cwidth = 33;

        var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) {
            return d.value;
          })

        var innerArc = d3.svg.arc()
          .innerRadius(58)
          .outerRadius(cwidth * 2.9);

        var outerArc = d3.svg.arc()
          .innerRadius(70 + cwidth)
          .outerRadius(cwidth * 3.5);

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

        var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
        var en = gs.selectAll("path")
          .data(function(d, i) {
            return pie(d);
          })
          .enter();

        en.append("path")
          .attr("fill", function(d) {
            return d.data.color;
          })
          .attr("d", function(d, i, j) {
            return j === 0 ? innerArc(d) : outerArc(d);
          });

        en.append("text")
          .text(function(d) {
            return d.data.label;
          })
          .attr("transform", function(d, i, j) {
            return j === 0 ? "translate(" + innerArc.centroid(d) + ")" : "translate(" + outerArc.centroid(d) + ")";
          }); 
  <script src="https://d3js.org/d3.v3.min.js"></script> 
<div id="duration">
    <svg style="height:300px;width:100%"></svg>
</div> 
  
 
 
 expects each data set to be a simple array of values 
 
This is not true. You can and should use an array of objects. Then use the value accessor to target a property of your object for the pie function. Here's how I'd re-factor your code: 
 
 
  
          var dataset = {
          apples: [{
            value: 13245,
            color: '#1352A4',
            label: 'one'
          }, {
            value: 28479,
            color: '#5D9CEC',
            label: 'two'
          }, {
            value: 11111,
            color: '#1352A4',
            label: 'three'
          }, {
            value: 11000,
            color: '#A4C7F4',
            label: 'four'
          }, {
            value: 3876,
            color: '#DBE8FB',
            label: 'five'
          }],
          oranges: [{
            value: 53245,
            color: '#58A53B',
            label: 'one'
          }, {
            value: 28479,
            color: '#83C969',
            label: 'two'
          }, {
            value: 19697,
            color: '#A8D996',
            label: 'three'
          }, {
            value: 24037,
            color: '#CDE9C3',
            label: 'four'
          }, {
            value: 19654,
            color: '#E6F4E1',
            label: 'five'
          }]
        };

        var width = d3.select('#duration').node().offsetWidth,
          height = 300,
          cwidth = 33;

        var pie = d3.layout.pie()
          .sort(null)
          .value(function(d) {
            return d.value;
          })

        var innerArc = d3.svg.arc()
          .innerRadius(58)
          .outerRadius(cwidth * 2.9);

        var outerArc = d3.svg.arc()
          .innerRadius(70 + cwidth)
          .outerRadius(cwidth * 3.5);

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

        var gs = svg.selectAll("g").data(d3.values(dataset)).enter().append("g");
        var en = gs.selectAll("path")
          .data(function(d, i) {
            return pie(d);
          })
          .enter();

        en.append("path")
          .attr("fill", function(d) {
            return d.data.color;
          })
          .attr("d", function(d, i, j) {
            return j === 0 ? innerArc(d) : outerArc(d);
          });

        en.append("text")
          .text(function(d) {
            return d.data.label;
          })
          .attr("transform", function(d, i, j) {
            return j === 0 ? "translate(" + innerArc.centroid(d) + ")" : "translate(" + outerArc.centroid(d) + ")";
          }); 
  <script src="https://d3js.org/d3.v3.min.js"></script> 
<div id="duration">
    <svg style="height:300px;width:100%"></svg>
</div>

更多推荐

D3同心/嵌套甜甜圈图表(D3 Concentric/Nested Donut Chart)

最满意答案

发布评论取消回复

最近发表

热门文章

标签列表