複数行グラフを更新/再描画する方法は？

Question

イベントの各「トラック」（投薬、ラボ、イメージング）が（赤い）線でつながれた、タイムライン上のさまざまなタイプの医療イベントを示すグラフを作成しています。 （意図的に何のラインを持っていない、下のトラック、「その他」ことに注意してください。）

彼らが使用して（活字体で）うまくレンダリング：

lineGen = d3.svg.line() 
.x((d:PatientEvent) => timeScaleAbs(d.time)) 
.y((d:PatientEvent) => ordScaleTmln(d.type) + ordScaleTmln.rangeBand()/2); 

clipAreaGroup.append('path') 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Med'}))) 
    .classed('event-group-line', true); 
clipAreaGroup.append('path') 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Lab'}))) 
    .classed('event-group-line', true); 
clipAreaGroup.append('path') 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Img'}))) 
    .classed('event-group-line', true); 

をチャートでナビゲーションブラシを持っていますしかし、私は、ブラシイベントの後にそれぞれの行パスを更新するコードを正しく記述する方法を知らない。私は以下のコードを一緒にハックしようとしました（これは上記のコードと実質的に同じですが、.data（）行の追加を除いて）、そしてほとんどの場合、トップライン（Medicationイベント用）は再描画されませんブラシ選択後に以下に示すように）。

lineGen = d3.svg.line() 
    .x((d:PatientEvent) => timeScaleAbs(d.time)) 
    .y((d:PatientEvent) => ordScaleTmln(d.type) + ordScaleTmln.rangeBand()/2); 

clipAreaGroup.selectAll('path') 
    .data(data.filter((val:PatientEvent) => {return val.type == 'Med'})) 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Med'}))) 
    .classed('event-group-line', true); 
clipAreaGroup.selectAll('path') 
    .data(data.filter((val:PatientEvent) => {return val.type == 'Lab'})) 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Lab'}))) 
    .classed('event-group-line', true); 
clipAreaGroup.selectAll('path') 
    .data(data.filter((val:PatientEvent) => {return val.type == 'Img'})) 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Img'}))) 
    .classed('event-group-line', true); 

呼び出しの順序としなければならないようです。並べ替えて "Img" - > "Med" - > "Lab"と呼ぶと、 "Lab"行だけが再描画されます。

私はこれを非常に上手くやっていないのは分かっていますが、d3がどのラインを更新のために追跡しているかは分かりません。私はちょうど良い再描画するために点を得るが、行のパスは本当に私を混乱させる。

Answer 1

clipAreaGroup.append('path')を呼び出すと、<svg>の中に新しい<path>が作成されます。これを3回実行すると、<svg>に3つの<path>が表示されます。あなたがclipAreaGroup.selectAll('path').data(...)を呼び出すと

、あなたは各<path>を選択するために、D3を言っていると、あなたは（余分なデータに対する新しい<path>の作成）選択中の要素にフィルタリングされたデータに各データを結合しています。これを3回実行して、その呼び出しのフィルタリングされたデータに基づいて毎回dの値を更新します。そのため、並べ替える順序が出力を変更するのはなぜですか。

あり、あなたの行を更新扱うことができるいくつかの方法がありますが、最も簡単な、おそらくデータバインディングを避け、ちょうどあなたが作成<path>の格納に次のようになります。お好きな時に、次に

var medPath = clipAreaGroup.append('path') 
    .attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Med'}))) 
    .classed('event-group-line', true); 

をそのパスを更新するには、あなただけのそのd attrの更新：

medPath.attr('d', lineGen(data.filter((val:PatientEvent) => {return val.type == 'Med'})))