使用 d3.scaleOrdinal 故障排除

Question

我正在制作一个平行图（请参阅：https://www.data-to-viz.com/graph/parallel.html），并且我的每条线也需要根据它们分配的国家/地区使用不同的颜色。我在 JS d3 工作。

这是我现在的规模：

var ColorScale = d3.scaleOrdinal().domain(countries).range(d3.schemeDark2);

但我认为问题不在这里，因为当我检查每个国家/地区都有不同的颜色代码时。 我有一个函数可以制作通过颜色的线条，然后是代码：

d3.select("g#lines")
.append("path")
.datum(data)
.attr("class", "line")
.attr("d", LineGenerator)
.style("stroke", Color);

当我检查页面时，stroke 总是设置为 rgb(102, 102, 102)，我认为它是灰色的。我认为我没有覆盖它的 CSS 规则。

如果您有兴趣，这里是codeandbox上完整代码的链接：https://codesandbox.io/s/csc-160-project-forked-5bx01

这是写在“parallelplot.js”文件中的。 “plot.html”文件是它被绘制的地方。数据来自“DataTransposed.csv”

Answer 1

您需要进行一些更改，首先您定义的用于绘制线条的函数只需要 5 个参数，并且您同时传递了比例和颜色值，它需要其中的第一个（比例），即始终相同，因此您的输出始终是相同的颜色。

var MakeLine = function (data, country, xScale, yScale, Color) {

其次，由于您可能会有超过 2 个国家/地区，因此您不想创建中间变量，只需发送评估

var ColorScale = d3.scaleOrdinal().domain(countries).range(d3.schemeDark2);
  MakeAxes(graph, margins, xScale, yScale);

  d3.select("svg#linegraph")
    .append("g")
    .attr("id", "lines")
    .attr("transform", MakeTranslateString(margins.left, margins.top));

  MakeLine(data, "Argentina", xScale, yScale, ColorScale("Argentina"));
  MakeLine(data, "Egypt", xScale, yScale, ColorScale("Egypt"));

如果您在浏览数据时将国家/地区名称作为变量传递以让单个语句完成所有操作，那就更好了。