Question

我目前正在尝试在同一个svg上绘制两个不同的图表。它的飞机坠毁（在y轴上）与飞行的kms数有关。我试图将非致命崩溃和致命崩溃都放在图表上。到目前为止，我刚刚宣布了两类圆圈并绘制了它们，但我觉得我可以通过一个函数更有效地完成它。到目前为止我有这个

    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: accidents85 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]))

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

1 个答案: