向此 D3 折线图添加散点图？

Question

D3 菜鸟在这里，我设法制作了一个多折线图，我想在线条上添加一个数据点。这样，我可以将鼠标悬停在单个数据点上并显示工具提示。如果有人可以帮助我将数据点添加到我的行中，我想我可以处理工具提示部分。

这是我在 pastebin 中的代码：http://pastebin.com/F8L5gS4D

我真的无法让它在 codepen 中运行或让它在堆栈溢出时显示而不会丢失其所有格式。

这是我正在使用的数据：http://pastebin.com/GyjMwqGb 但我在 javascript 中使用 d3.nest() 对其进行了重组，并按 School 对其进行排序。

任何帮助将不胜感激。也许甚至只是给我一个好的指南。

谢谢大家！

Answer 1

您在svg.append 所在的forEach 不是D3 方式。 通过一些教程了解d3.selectAll()

• https://square.github.io/intro-to-d3/data-binding/
• http://alignedleft.com/tutorials/d3/binding-data

然后我会在从 CSV 读取数据之前使用硬编码数据。

最后，当您阅读 CSV 时，通常会将添加 SVG 元素的代码放在 d3.csv 的正文中

d3.csv("apdata.csv", function(error, data) {
   data.forEach(function(d) {
      d.Wk = +d.Wk;
      d.Rk = +d.Rk;
   svg.selectAll(...)
     .append()
     ...
 });

HTH