d3 barchartに注釈の配列を追加するにはどうすればよいですか？

Question

私はCSVデータを読み込み、d3.nest()を使用して年ごとにデータをグループ化することで、毎年のデータに対して、barchartを描くことができました。ブロックhereまたはblockbuilder hereを参照してください。 しかし、私は現在、annotations配列のメモを各グラフに追加しようとしています。私は立ち往生しています。

私が試みているアプローチの1つは、selectAll(".charts")で、ネストされた注釈配列、つまりannotationsPerYearを追加することです。しかし、私はannotationsPerYearキーを自分のチャートに追加してから、毎年のノートを反復して正しいチャートに追加するのは難しいと思っています。何か案は？

Answer 1

これにネストされた選択を使用することができます。あなたは既に、このビットで、ネストされた選択を使用している：

svg.selectAll(".bar") 
    .data(function(d) {return d.values;}) 

上記以前に作成した3 SVGsのそれぞれに異なるデータをバインドします。これはfunction(d)を3回呼び出すことで行い、毎回異なるd.valuesを返します。

同様のことをして、各SVGに別々の注釈セットをバインドして作成することができます。チャートごとに適用可能な注釈を返す関数（data()に渡す）が必要ですが、今回はd.valuesのように事前計算されたものはありません。代わりに、あなたはfilter()を使用して、annotations配列のうち、該当する注釈を抽出する必要があります：あなたは、テキストを作成し、それを配置するために、バーのために行われてきたようにその後、あなたはenter()とappend()を使用することができます

svg.selectAll(".annotation") 
    .data(function(d) { 
    // return annotations whose key matches d's key 
    return annotations.filter(function(a) { return a.key == d.key; }); 
    }) 

。私はあなたがそれをレイアウトするつもりかわからないんだけど、完全にあなたは、このような何かしたい：

svg.selectAll(".annotation") 
    .data(function(d) { 
    return annotations.filter(function(a) { return a.key == d.key; }); 
    }) 
.enter() 
    .append("text") 
    .attr("class", "annotation") 
    .attr("x", function(d) { return x(d.xPos); }) 
    .attr("y", function(d) { return d.yPos; }) 
    .text(function(d) { return d.note; }) 

参照：

• Updated block
• Updated blockbuilder