Question

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

换句话说：数据集1 = x，y 数据集2 = x，z

我正在使用Bostock's Multi-Series Line chart作为我的基本参考。

我曾经想过：我应该将两个.tsv合并为一个.json吗？

Answer 1

无论您是要组合成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都有一个不能动态更改的宽度。要实现这一点，您需要将线分成单独的段或创建一个模拟不同宽度线的填充路径。

D3 - 使用第二个数据集制作笔画宽度的covary

1 个答案: