Question

由于某种原因，在这段代码append("g)的最后一个块中我们成功了，但数据绑定到追加行却没有。我知道应该只打印10行，但由于某种原因我甚至无法将它们打印到页面中。谁能看到错误？非常感谢你的帮助！

var w = 300;

var dataset = 10;

var svg = d3.select("body").append("svg")
            .attr("width", w)
            .attr("height", w);

svg.append("line")
  .attr("x1", w/2)
  .attr("y1", 0)
  .attr("x2", w/2)
  .attr("y2", w);

svg.append("line")
  .attr("x1", 0)
  .attr("y1", w/2)
  .attr("x2", w)
  .attr("y2", w/2);

  svg.append("g")
  .selectAll("line")
  .data(dataset)
  .enter()
  .append("line")
  .attr("x1", 0)
  .attr("y1", w/4)
  .attr("x2", w/2)
  .attr("y2", w/4);

Answer 1

dataset中的

.data(dataset)必须是一个数组才能得到任何结果。如果您使用，例如.data([dataset])，您将获得一行。如果你想要10行，你可以使用.data(d3.range(10))并添加一些颜色来查看/它们：

svg.append("g").selectAll("line")
    .data(d3.range(10))
    .enter()
    .append("line")
        .attr("x1", 0)
        .attr("y1", w/4)
        .attr("x2", w/2)
        .attr("y2", w/4)
        .style('stroke', 'green');

非常基本的语法错误，没有在d3中绘制的线条

1 个答案: