2

我正在使用 .tsv 数据集构建一个非常简单的多线图来测量一段时间内的值。我想合并第二个 .tsv 来改变每行的笔画宽度。这两个数据集具有相同的 x 值（时间），但一个将绘制每条线的 y 值，另一个数据集将在 x 和 y 值上绘制线的笔画宽度（我们称之为“z”）。

换句话说： Dataset1 = x,y Dataset2 = x,z

我使用Bostock 的多系列折线图作为我的基本参考。

我有一个想法：我应该将两个 .tsv 合并为一个 .json 吗？

4

1 回答 1

0

无论您是要组合成 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-30T17:33:43.240 回答