javascript - 如何使用函数绘制两个不同的数据集？

Question

我目前正在尝试在同一个 svg 上绘制两个不同的图表。它是飞机失事(在 y 轴上)与飞行公里数的关系。我试图将非致命崩溃和致命崩溃都放在图表上。 到目前为止，我刚刚声明了两类圆并绘制了它们，但我觉得我可以使用函数更有效地完成它。 到目前为止我有这个

    function myFunc(variable){
    count++;
    canevas.selectAll(`.c${count}`)
      .data(data)
      .enter
      .append("circle")
        .attr("class",`c${count}`)
        .attr("cx",d=>echelleKm(d.kmSemaine))
        .attr("cy",d=>echelleAccidents(d.variable))
        .attr("r",4)
        .attr("opacity",.5)
        .attr("fill",colors[count-1]);
  }
  myFunc(accidents85);
  myFunc(accidents00);

我在控制台中收到一条错误消息，显示“(index):109 Uncaught ReferenceError:accident85 is not Defined”，但我并没有真正明白。如果我在声明函数之前执行 console.log(d3.max(data,d=>d.accidents85) ，我可以在控制台日志中看到一些内容。

我觉得我错过了一些明显的东西，但我对 d3.js 和一般编码相当陌生，所以任何帮助将不胜感激。

谢谢!

编辑:我放了一张图片，显示如果我的函数按照我想要的方式工作，结果应该是什么 here

Answer 1

任何地方都没有定义名为 accidents85 或 accidents00 的变量。由于您只是传递数据数组中对象的属性名称，因此必须使用引号:

myFunc("accidents85");
myFunc("accidents00");

然后，在 myFunc 中，使用方括号表示法:

.attr("cy",d=>echelleAccidents(d[variable]))