我创建了一个带有D3的圆环图,它使用了两个数据集,并为每个数据集显示略微不同的大小。我想为数据集添加标签(对于图例),但selectAll("path")
期望每个数据集都是一个简单的值数组,因此我无法添加标签。
以下是我到目前为止的代码和小提琴:
var dataset = {
apples: [13245, 28479, 11111, 11000, 3876],
oranges: [53245, 28479, 19697, 24037, 19654],
};
var width = d3.select('#duration').node().offsetWidth,
height = 300,
cwidth = 33;
var colorO = ['#1352A4', '#2478E5', '#5D9CEC', '#A4C7F4', '#DBE8FB'];
var colorA = ['#58A53B', '#83C969', '#A8D996', '#CDE9C3', '#E6F4E1'];
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc();
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 path = gs.selectAll("path")
.data(function(d, i) { return pie(d); })
.enter().append("path")
.attr("fill", function(d, i, j) {
if (j == 0) {
return colorO[i];
} else {
return colorA[i];
}
})
.attr("d", function(d, i, j) {
if (j == 0) {
return arc.innerRadius(75 + cwidth * j - 17).outerRadius(cwidth * (j + 2.9))(d);
} else {
return arc.innerRadius(75 + cwidth * j - 5).outerRadius(cwidth * (j + 2.5))(d);
}
});
答案 0 :(得分:1)
期望每个数据集都是一个简单的值数组
事实并非如此。您可以而且应该使用一组对象。然后使用值accessor为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>
&#13;