マルチラインD3グラフのポイントに色を追加する。ドロップダウン変更時に再レンダリング

Question

私は現在、複数線グラフを作成中です。私の作業のコードはここで見つけることができます：私は2つの問題を抱えている

https://jsfiddle.net/KateJean/1uszmp73/3/

。 1つはマイナーですが、もう1つは説明があります。

マイナーissue： 私はラインの色と一致するポイントの色を取得できません。 ＃117行目でその行がコメントアウトされています。間違っていますか？サークルのプレースメント自体をどのように定義していますか？

//style the circles set their location based on data 
var circles = metrics.selectAll("dot") 
     .data(function(d) {return d.Data;}) 
    .enter().append("circle") 
     .attr("class", "circles") 
     .attr("r", 4) 
     /*.style("fill", function (d) {return color(d.Metric);}) -- this is where I'm having issues */ 
     .attr("cx", function (d) {return xScale(parseDate(d.Date)); }) 
     .attr("cy", function (d) {return yScale(d.Value)}); 

大きな問題： 私は「モデルA」のデータと「モデルB」とどのように変化にグラフを再描画するを示す切り替える方法についていくつかの提案をしてみたいです。私はいくつかの解決策を見出そうとしましたが、私は間違いを犯し続けました、あるいは何も拾われませんでした。いずれにしても、一貫性のあるエラーや再現可能なエラーはありません。そのため、私が知っていたコードをバックトラックして作業しています。

私はthisのようなものを実装したいと思いますが、特定のネストされたデータセットでこれらのソリューションを適用する方法がわかりません。また、私は私のためにデータをフィルタリングします場所でサービスを持っているので、理想的にドロップダウン変化に私は、このようなデータセットを返します：

{ 
"Model": "Model A", 
"Data": [ 
    { 
     "Metric": "Metric 1", 
     "Data": [ 
       {"Date":"2017-2-25", "Value": "34"}, 
       {"Date":"2017-2-26", "Value": "52"}, 
       {"Date":"2017-2-27", "Value": "47"}, 
       {"Date":"2017-2-28", "Value": "50"} 
     ] 
    }, 
    { 
     "Metric": "Metric 2", 
     "Data": [ 
       {"Date":"2017-2-25", "Value": "22"}, 
       {"Date":"2017-2-26", "Value": "27"}, 
       {"Date":"2017-2-27", "Value": "25"}, 
       {"Date":"2017-2-28", "Value": "21"} 
     ] 
    }, 
    { 
     "Metric": "Metric 3", 
     "Data": [ 
       {"Date":"2017-2-25", "Value": "27"}, 
       {"Date":"2017-2-26", "Value": "28"}, 
       {"Date":"2017-2-27", "Value": "25"}, 
       {"Date":"2017-2-28", "Value": "22"} 
     ] 
    } 
] 

}

を私はちょうどように見えることはできませんフックアップするので、ドロップダウンでグラフは新しいソースで再レンダリングされます。

ありがとうございます！

Answer 1

jsFiddleを更新して、一致する色を取得しました。基本的には、ドットがサブアレイに結合しているので、親の財産を取得する必要がありますされています

var circles = metrics.selectAll("dot") 
    .data(function(d) {return d.Data;}) 
    .enter() 
    .append("circle") 
    .attr("class", "circles") 
    .attr("r", 4) 
    .style("fill", function (d) {return color(d3.select(this.parentNode).datum().Metric);}) //current data is the sub-array. To match the color, the data from the parent must be used. 
    .attr("cx", function (d) {return xScale(parseDate(d.Date)); }) 
    .attr("cy", function (d) {return yScale(d.Value)}); 

あなたのアイデアを更新するためとして、あなたが入力した-更新、削除のパターンを適用する必要があります。

var state = svg.selectAll(".line") 
    .data(result, function(d){return d.key}); 

    state.enter().append("path") 
     .attr("class", "line"); 

    state.transition() 
     .style("stroke", function(d,i) { return d.color = color(d.key); }) 
     .attr("id", function(d){ return 'tag'+d.key.replace(/\s+/g, '');}) // assign ID 
     .attr("d", function(d){ 

      return stateline(d.values) 
     }); 

    state.exit().remove(); 

基本的な考え方は次のとおりです：あなたが投稿特に、かなりよくそれを強調するように思わbl.ocksデータへ

• バインド
• が必要
• 更新などの新しい要素を作成します関連するプロパティ
• 不要な要素を削除する

あなたのコードはきちんと構造化されているように見えます。新しい要素に固有の部分を、既存の部分と新しい部分の両方に適用する部分から分割してください。サイドノートでは

、私は