Блог

Я возился, пытаясь выяснить, почему этот контур появляется во время рисования диаграммы пончика, а затем исчезает после ее завершения. Это светло-серый контур, который появляется, когда происходит эффект интерполяции / отскока. Вот код и скрипка. Спасибо за любую помощь.

 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 и Endangerle одинаковое значение, чтобы переход начинался с одной точки — в противном случае он рисует другую дугу, которая создает упомянутый эффект. попробуйте

 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 /