如何更新/重繪多線圖？

我正在製作一個圖表，顯示時間線上不同類型的醫療事件，每個事件（藥物，實驗室和成像）的「跟蹤」都與（紅色）線相連。（請注意，底部軌道，「其他」，故意沒有線。）如何更新/重繪多線圖？

他們渲染得很好（以打字稿）使用：

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如何跟蹤哪些線路用於更新目的。我得到的點重繪得很好，但線路真的讓我困惑。

來源

2016-12-15 davidlav

當您撥打clipAreaGroup.append('path')時，您將在<svg>內部創建一個新的<path>。你這樣做三次，所以你最終會在你的<svg>中得到三個<path>。

當您撥打clipAreaGroup.selectAll('path').data(...)時，您告訴d3選擇每個<path>，然後您將篩選數據中的每個數據綁定到選擇元素（爲任何額外數據創建新的<path>）。您正在這樣做三次，每次根據該調用的過濾數據更新d值，這就是您安排它們的順序正在更改輸出的原因。

有很多，你可以處理更新線路的方式，但最簡單的很可能是爲了避免數據綁定，只是存儲您所創建的<path> S：

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'})))

來源

2016-12-15 19:19:46

這是_exactly_我需要解釋，完美的作品，使總感覺。謝謝！！ – davidlav

如何更新/重繪多線圖？

回答

相關問題