Question

我想使用D3表示特定时间段内的处理器使用情况。我将数据分布在多个文件中，所有文件都具有相同的格式，但每个文件代表不同的处理器。例如：

file1.tsv

time  P1
t0    0
t2    1
t3    2

file2.tsv

time  P2
t1    3
t3    4
t4    5

我想在同一个图表中绘制这些数据，每个文件数据都在单独的行中。 D3在他们的教程中建议绘制多行的方法是以一种格式导入一个文件中的所有处理器：

文件全proc.tsv

time  P1  P2  P3
t0    1   2   3
t1    3   5   7 
t2    1   3   5
..    .   .   .

您知道是否有更好的方法来手动合并我的文件？

手动合并不会向前发展，因为我应该合并数据，按时间顺序排序，为空字段设置零，...

Answer 1

这很简单。定义你的svg，然后为每个文件构建你的行。

var svg = d3.select('#someDivId').append('svg');

d3.tsv('file1.tsv', function(data) {
  svg.selectAll('.file1')
  .data(data)
  .enter()
  .append('path')
  .attr('class','file1')
  .attr('d', linefunction(data))});

d3.tsv('file2.tsv', function(data) {
  svg.selectAll('.file2')
  .data(data)
  .enter()
  .append('path')
  .attr('class','file2')
  .attr('d', linefunction(data))});

使用此方法，您可以使用课程.file1和.file2来设置线条样式。您甚至可以使用queue.js加载所有文件，然后只需构建一次您的函数。你甚至可以在这里做到这一点。

var filenames = ['file1','file2','file-all-proc'];

function addLine(name) {
 d3.tsv(name+'.tsv', function(data) {
  svg.selectAll('.'+name)
  .data(data)
  .enter()
  .append('path')
  .attr('class',name)
  .attr('d', linefunction(data));
}

filenames.forEach(addLines(file));

Answer 2

在开始绘制图表之前，您可以创建包含所有数据的json。或者你可以创建一个返回json的函数，然后将它传递给draw函数。

D3在一个图表中绘制多个文件，每个文件代表不同的行/条

2 个答案: