javascript - 嵌套折线图的d3js副本

Question

我正在尝试使用 d3js 重新创建下面的图表

我一直在尝试关注这个问题D3js - 创建并轻松更新多折线图，但我缺少一些似乎与 d3js 文档相关的所有内容都假定的基础知识：

1. d3js 实际上是如何绘制任何东西的？它实际上在哪里循环遍历数据集？

2. 域和范围，好吧，这是我的错，我需要复习绘图基础知识，但我假设 d3 会处理这个问题，在这个例子中，这实际上是什么意思？

   var w = 25,
   h = 200;
   
   var x = d3.scale.linear()
      .domain([0, 1])
      .range([0, w]);
   

这实际上告诉 d3.scale.linear 方法是什么？

3) 最终，我想在给定数据的上方创建从 1 到 100（或更高）的图表，并且 Y 轴随着数字的增加而增加，而 X 轴随着日期的推移而增加。甚至如何在键值对中格式化这些数据？

4) d3 是否像分层一样简单地将所有 JS 指令堆叠起来？这是 1) 的扩展，我真的不明白它是如何渲染任何东西的。关于 SVG 的一些事情

Answer 1

我建议您查看一些d3 教程，以更好地了解正在发生的事情。关于您的具体问题，请参见下文。

1. 它从不循环，它通过将数据绑定到（可能不存在的）元素和对更改、新和删除元素的选择（即子集）进行操作来工作。例如，请参阅本教程。
2. 这些d3.scale.*方法制作图形比例。也就是说，它们将输入值映射到输出值（图表中的坐标）。d3.scale.linear()顾名思义，创建一个线性比例。
3. 您可以按照您真正想要的任何方式格式化数据。再次，查看示例教程。
4. 见 1。