D3 - 使用第二個數據集製作筆畫寬度的協同數

我正在構建一個非常簡單的使用.tsv數據集隨時間測量數值的多線圖。我想合併第二個.tsv，它將改變每一行的筆畫寬度。兩個數據集具有相同的x值（時間），但其中一個將繪製每條線的y值，另一個數據集將在x和y值上繪製線的筆觸寬度（我們稱之爲'z'）。D3 - 使用第二個數據集製作筆畫寬度的協同數

換句話說： dataSet1的= X，Y Dataset2 = X，Z

我使用Bostock's Multi-Series Line chart作爲我的基本參考。

有一個想法我有：我應該將兩個.tsv合併成一個.json嗎？

來源

2013-09-30 Nick Stockton

你要麼解析兩個TSV，要麼在兩個地方使用單個JSON來創建線圖（假設你使用數據連接），那麼選擇你的戰鬥？我發現JSON對於使用JSON數據與CSV或TSV的絕對數量的例子來說更容易。再次，如果您有權訪問的數據是TSV，通過堅持使用您的數據可能會有助於消除轉換頭痛。 – chrisgonzalez

是的，結合到一個單一的JSON將是在A的痛苦。現在，解析給我一個巨大的頭痛。 –

無論您是將要結合成JSON文件還是單個TSV，我都強烈建議加入這兩個文件。除了使數據訪問不那麼令人困惑外，您還只需要一次加載調用而不是兩次嵌套調用。因此，而不是像

d3.tsv("1.tsv", function(error1, data1) { 
    d3.tsv("2.tsv", function(error2, data2) { 
    // ... 
    something.selectAll("path") 
     .data(data1).enter() 
     .append("path") 
     .style("stroke-width", function(d, i) { return data2[i].z; }) 
     .attr("d", function(d) { return d.y; }); 
    }); 
});

你可以做類似

d3.tsv("1.tsv", function(error, data) { 
    // ... 
    something.selectAll("path") 
     .data(data1).enter() 
     .append("path") 
     .style("stroke-width", function(d) { return d.z; }) 
     .attr("d", function(d) { return d.y; }); 
});

請注意，您將無法改變，雖然在SVG行的筆畫寬度。也就是說，每個path的寬度都不能動態更改。爲了達到這個目的，你需要把這條線分成不同的線段或者創建一條填充路徑來模擬不同寬度的線條。

來源

2013-09-30 17:33:43

D3 - 使用第二個數據集製作筆畫寬度的協同數

回答

相關問題