D3甜甜圈图不需要的轮廓在插值期间

d3 donut chart unwanted outline during interpolation

本文关键字：插值 轮廓 甜甜圈 不需要 D3      更新时间：2023-09-26

我一直在瞎折腾，试图弄清楚为什么这个大纲在甜甜圈图绘制时出现，然后在完成后消失。这是一个浅灰色的轮廓，是那种出现，而插值/反弹影响发生。谢谢你的帮助。

var data = [ 
    {name: "Yo", value: 5500},
    {name: "Dawg", value:  3800},
    {name: "Dis", value:  2500},
    {name: "Pie", value:  2000},
    {name: "Doe", value:  1500},
    {name: "Yo", value: 5000}
];
var margin = {top: 40, right: 20, bottom: 20, left: 20};
    width = 400 - margin.left - margin.right;
    height = width - margin.top - margin.bottom;
var chart = d3.select("body")
                .append('svg')
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
               .append("g")
                .attr("transform", "translate(" + ((width/2)+margin.left) + "," + ((height/2)+margin.top) + ")");

var radius = Math.min(width, height) / 2;
var color = d3.scale.ordinal()
    .range(['red', 'blue', 'yellow', 'orange', 'green', '#ffffff']);
var arc = d3.svg.arc()
    .outerRadius(radius)
    .innerRadius(radius - 20);
var myScale = d3.scale.linear().domain([0, 360]).range([0, 2 * Math.PI]);
var pie = d3.layout.pie()
    .sort(null)
    .startAngle(myScale(45))
    .endAngle(myScale(405))
    .value(function(d) { return d.value; });
var g = chart.selectAll(".arc")
.data(pie(data))
.enter().append("g")
  .attr("class", "arc");
g.append("path").attr("fill", function(d, i) { return color(i); })
 // .attr("d", arc)
.transition()
    .ease("bounce")
    .duration(2000)
    .attrTween("d", tweenPie);
function tweenPie(b) {
    var i = d3.interpolate({startAngle: myScale(45), endAngle: myScale(405)}, b);
  return function(t) { return arc(i(t)); };
}

这是小提琴:

http://jsfiddle.net/connorsan/SdN2F/18/

在你的tweenpie函数中，你必须将startAngle和endAngle设置为相同的值，以便过渡从一个点开始-否则它会绘制另一个弧来创建上述效果。试着

function tweenPie(b) {
    var i = d3.interpolate({startAngle: myScale(45), endAngle: myScale(45)}, b);
  return function(t) { return arc(i(t)); };

小提琴:http://jsfiddle.net/SdN2F/22/

相关文章：