Question

我一直在搞乱，试图找出为什么这个轮廓在圆环图表绘制时出现，然后一旦完成就会消失。它是一个浅灰色的轮廓，当插值/反弹效果发生时会出现这种情况。这是代码和小提琴。谢谢你的帮助。

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/

Answer 1

在你的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/

插图期间d3圆环图表不需要的轮廓

1 个答案: