D3 - 使第二个数据集的笔画宽度变化 [英] D3 - Making stroke-width covary with second data set

问题描述

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

I'm building a pretty straightforward multi-line chart measuring values over time using a .tsv dataset. I want to incorporate a second .tsv that will change the stroke-width of each line. The two datasets have the same x-value(time), but one will plot each line's y-value, and the other dataset will plot the line's stroke-width (let's call it 'z') over the x and y values.

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

In other words: Dataset1 = x,y Dataset2 = x,z

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

I'm using Bostock's Multi-Series Line chart as my base reference.

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

One thought I've had: Should I merge the two .tsv's into a single .json?

推荐答案

无论你要组合成一个JSON文件还是单个TSV，我强烈建议加入这两个文件。除了使数据访问更加混乱外，您还只需要一个加载调用，而不是两个嵌套的调用。而不是像

Regardless of whether you're going to combine into a JSON file or a single TSV, I would highly recommend joining the two files. Apart from making data access less confusing, you'll also need only a single load call instead of two nested ones. So instead of something like

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 的宽度不能动态更改。要实现这一点，您需要将该行拆分为单独的段或创建一个模拟宽度变化的行的填充路径。

Note that you won't be able to vary the stroke width of a line in SVG though. That is, each path has a width that you can't change dynamically. To achieve this, you would need to break up the line into separate segments or create a filled path that simulates a line of varying width.

这篇关于D3 - 使第二个数据集的笔画宽度变化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！