d3.stackデータ構造の更新データ結合パターンを取得できません

Question

積み上げられた縦棒グラフを更新する際に問題が発生します。 （TL; DR：there's a fiddle here、エラーは194-5行で発生します）。各列は、ビタミンを表し、その後Appleはvitimin Aの5つの単位を有するであろう、ビタミンBの4ことを想像

[ 
    [ [0,5], [0,4], [0,6], [0,3] ], // key: apple 
    [ [5,7], [4,7], [6,7], [3,3] ] // key: banana 
] 

：例として、stack関数によって作成されたデータ構造は次のようになり

、等...、とオレンジなどのビタミンAの2台、3 OビタミンB、

を持つことになり、私は私のES6クラスでグラフを作成することができます。

this.svg.append("g") 
     .attr("class", "seriesGroup") 
    .selectAll("g") 
    .data(stack(this.data)) 
    .enter() 
    .append("g") 
     .attr("class", (d,i) => { return "series" + i}) 
    .selectAll("rect") 
    .data((d) => { return d; }) 
    .enter() 
    .append("rect") 
     .attr("class", ("bar")) 
     .attr("x", (d) => { return this.x(d.data.perception); }) 
     .attr("y", (d) => { return this.y(d[1]); }) 
     .attr("height", (d) => { return this.y(d[0])- this.y(d[1]); }); 
     .attr("width", this.x.bandwidth()) 

コードは次の構造を作成します。

<g class="seriesGroup"> 
    <g class="series0> //apple 
    <rect class="bar"> 
    ... 
    </g> 
    <g class="series1"> //banana 
    ... 

ただし、更新は難しいです。私はリンゴのシリーズをゼロにデータを変更し、再度stackを呼び出す場合、私が今持っている：

[ 
    [ [0,0], [0,0], [0,0], [0,0] ], // key: apple 
    [ [0,2], [0,3], [0,1], [0,0] ] // key: banana 
] 

ここに私の更新コードは次のとおりです。

let seriesGroup = this.svg.selectAll(".seriesGroup") 
     .data(stack(newData)) 
     .attr("class", "seriesGroup updated"); 

    let series = seriesGroup.enter() 
     .selectAll((d,i) => { console.log(i + " series data is " + d); return ".series" + i }) 
     .data((d) => { console.log(d); return d; }) 
     .enter() 
      .attr("class", (d) => { console.log(d); return "series updated2" }); 

    series.enter() 
     .selectAll("rect") 
     .data((d) => { console.log(d); return d; }) 
      .attr("class", ("bar updated")) 
      .transition().duration(this.settings.transitionDuration) 
      .attr("y", (d) => { 
      console.log("Now setting y to " + this.y(d[1]) + " and height to " + (this.y(d[0]) - this.y(d[1])) + " for data " + d); 
      return this.y(d[1]); }) 
      .attr("height", (d) => { return this.y(d[0])- this.y(d[1]); }); 

どういうわけか、このコード/ SVG構造の組み合わせが原因となっていますd3ライブラリのTypeError: this.setAttribute is not a function。エラーの原因となった行は次のとおりです。

.attr("class", (d) => { console.log(d); return "series updated2" }); 

明らかに私はデータ結合に失敗していますが、わかりません。私は間違って何をしていますか？

Answer 1

エラーの根本的な原因は、不良セレクタです。 selectAllは、それが思わデータにマッピングされた匿名関数を取ることができないので、この行は動作しません。

.selectAll((d,i) => { return ".series" + i })

親の選択seriesGroupが既ににバインドされたデータを持っていないので、概念的には、私は、これは少し奇妙見つけますそれはうまくいけば誰かがコメントし、その行がなぜ機能しないのか説明することができます。解決方法はそれぞれ.seriesNグループを.seriesクラスとして宣言し、それを選択することです。次に、新しいデータが加入

.selectAll(".series")

は、たとえば、実行することができます。

.selectAll(".series") 
    .data((d) => { return d; }) 
    .attr("class", (d,i) => { return "series updated2 series" + i});