javascript - 线路发生器不工作

我想创建一个平行坐标图。但是，我在使用行发生器时遇到了麻烦。运行代码时，我看到在正确的位置并使用class属性创建了两个路径元素。另外，作为完整性检查，我刚刚添加了此a属性，以查看数据是否正确（正确！）。

但是，SVG路径不是由我的线生成器生成的。实际上，d属性根本没有添加到path元素中。

var xScale = d3.scalePoint()
    .domain(d3.range(dimensions.length))
    .range([0, width]);

var yScale = d3.scalePoint()
  .domain([0, 1])
  .range([0, height]);

var lineGenerator = d3.line()
  .x( function(d){xScale(d.u);} )
  .y( function(d){yScale(d.c);} )

a = [
      {"u":0, "c":0.1},
      {"u":1, "c":0.2},
    ]

    foreground = svg.append("g")
    .attr("class", "foreground")
  .selectAll("path")
    .data(a)
    .enter()
    .append("path")
      .attr("class", "line")
      .attr("a", function(d){return [d.u, d.c];})
      .attr("d", lineGenerator)
      ;

最佳答案

两个主要问题。

首先，您必须在行生成器中返回值：

var lineGenerator = d3.line()
  .x(function(d) {
    return xScale(d.u);
  })
  .y(function(d) {
    return yScale(d.c);
  });

其次，您的数据方法不正确。它应该是：

.data([a])

或者，或者，放弃回车选择并仅使用datum（如果只有一条路径）：

foreground = svg.append("path")
  .datum(a)
  //etc...

另一个选择是将字符串直接传递给d属性（如果只有一个路径，也可以）：

foreground = svg.append("path")
  .style("stroke", "black")
  .attr("d", lineGenerator(a));

最后，检查那些秤。我敢打赌，scalePoint不是您想要的y轴。