javascript - D3.jsが新しいデータでスプラインを更新

Question

スプラインを新しいデータで更新しようとしていますが、D3.jsライブラリの使用で問題が発生しています。

これが私のフィドルです：http：//jsfiddle.net/2N2rt/22/

ユーザーがボタンをクリックすると、新しいデータに従って各スプラインをアニメーション化することが目標になります。本当に親密な気がします。私は「結合で考える」という記事を読み、それを使用して上記のフィドルを考え出しました。

Answer 1

フィドルでは、データを変更するときにd属性を間違った要素に適用しています。enterグループでは、新しいグループ（class people）を追加してから、グループに行要素を追加します。そのため、データが変更された場合は、グループ自体ではなく、グループ内の行を更新する必要があります。修正するには、

people.selectAll(".line").transition()

それ以外の

people.transition()

Answer 2

これが実際の例ですhttp://jsfiddle.net/3UkKW/4/。論理的なチンパンジーが答えたように、あなたは更新するために間違った要素を選択しました。

var draw = function() {

    var people = svg.selectAll(".line")
        .data(data, function(d) { return d.name; });

    people
        .transition()
        .duration(1000)
        .attr("d", function(d) { return line(d.values);});

    people.enter()
        .append("path")
        .attr("class", "line")
        .attr("d", function(d) { return line(d.values);})
        .style("stroke", function(d) {return color(d.name);});

    people.exit()
        .transition()
        .duration(100)
        .remove()
}