我得到一个糟糕渲染的饼图。为什么会这样?我做错了吗?我能做些什么来拥有更好的边界?我正在使用v3.5.17。
var w = 500,
h = 500;
//var data = [10, 80, 50, 60, 30, 42, 27, 77];
var max = d3.max(data);
var min = d3.min(data);
var color = d3.scale.ordinal().range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
console.log(color(50));
var canvas = d3.select("#piegraphic").append("svg")
.attr("width", w)
.attr("height", h);
var group = canvas.append("g")
.attr("transform", "translate(200, 200)");
var r = 150;
var arc = d3.svg.arc()
.outerRadius(r - 10)
.innerRadius(0);
var arc2 = d3.svg.arc()
.outerRadius(r + 10)
.innerRadius(0);
var pie = d3.layout.pie()
.value(function (d) {
return d.count;
});
var arcs = group.selectAll(".arc")
.data(pie(data))
.enter()
.append("g")
.attr("class", "arc");
var asdf = arcs.append("path")
.attr("d", arc)
.attr("fill", function (d) {
return color(d.data);
})
asdf.on("mouseover", function (d) {
d3.select(this).transition().duration(200).attr("d", arc2);
});
asdf.on("mouseout", function (d, i) {
d3.select(this).transition().duration(200).attr("d", arc);
});
var circle = group.append("circle")
.attr({
"cx": 0,
"cy": 0,
"r": 140,
"fill": "none",
"stroke": "#fff",
"stroke-width": 2
});
我尝试了其他方法,但我总是得到相同的结果,我不知道我还能尝试什么。提前致谢
修改 我的数据如下:
[{count:106136313.3, label : "RR" },{count:136313.3, label : "RA" },{count:1061313.3, label : "TE" }]