Question

我想创建一个平行坐标图表。但是，我遇到了线路生成器的问题。当我运行我的代码时，我看到在正确的位置和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)
      ;

Answer 1

两个主要问题。

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

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轴。

线路生成器不工作

1 个答案: