2

d3.js でアニメーション化された円弧セグメントを作成しようとしています。アークとトランジションが機能するようになりましたが、アニメーションの実行中にアークが歪んでしまい、その理由がわかりません。

これが私がこれまでに持っているものです：

jsfiddle 

var dataset = {
    apples: [532, 284]
};

var degree = Math.PI/180;

var width = 460,
    height = 300,
    radius = Math.min(width, height) / 2;

var color = d3.scale.category20();

var pie = d3.layout.pie().startAngle(-90*degree).endAngle(90*degree)
    .sort(null);

var arc = d3.svg.arc()
    .innerRadius(radius - 100)
    .outerRadius(radius - 50);

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

var path = svg.selectAll("path")
    .data(pie(dataset.apples))
  .enter().append("path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);   


window.setInterval(dummyData, 2000);

function dummyData(){
    var num = Math.round(Math.random() * 100);
    var key = Math.floor(Math.random() * dataset.apples.length);

    dataset.apples[key] = num;

    draw();
};

function draw(){     
    svg.selectAll("path")
        .data(pie(dataset.apples))
    .transition()
    .duration(2500)
        .attr("fill", function(d, i) { return color(i); })
        .attr("d", arc);   
}
4

1 に答える 1

1

リチャードが説明したように、以前に計算された SVG パス文字列と新しく計算された文字列の間で補間を行っているため、以前の角度と新しい角度の間で補間するのではなく、奇妙なことが起こります。

関数を使用して、入力を補間し、各補間値マップを SVG パス文字列に補間する必要がありますarc。これを行うには、以前の各データをどこかに保存し、カスタム トゥイーン関数を使用する必要があります。これは、前のコメントの例で見つけることができます。

1. 以前のデータムを記憶する (最初):

.each(function(d) { this._current = d; });

2. カスタム トゥイーン関数を定義します。

function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0); // Remember previous datum for next time
  return function(t) {
    return arc(i(t));
  };
}

3. 使用:

.attrTween("d", arcTween)

これは次のようになります: http://jsfiddle.net/Qh9X5/18/

于 2013-05-23T16:59:09.330 に答える