Question

我希望以下代码在同一个svg上绘制两条不同的行，但它只返回两条空路径＆gt;

<body>

<svg width="960" height="500"></svg>

<script>

data = [
{ Name: "line1", color: "blue", Points: [{x:0, y:5 }, {x:25, y:7 }, {x:50, y:13}] },
{ Name: "line2", color: "green", Points: [{x:0, y:10}, {x:25, y:30}, {x:50, y:60}] }
];

var line = d3.line()
  .x(function(d, i) {return d.x})
  .y(function(d, i) {return d.y})

var lines = d3.select("svg")
    .selectAll("path")
    .data(data)
    .enter()
        .append("path")
        .attr("d", line);

</script>

</body>

我找不到多个具有类似于我的数据结构的折线图示例。

Answer 1

实际上，您需要访问数据数组的每个元素的Points字段：

在：

var lines = d3.select("svg")
  .selectAll("path")
  .data(data)
  .enter()
    .append("path")
    .attr("d", line);

替换

.data(data)

通过

.data(data.map( function(d) { return d.Points }))

Answer 2

问题是您将整个对象从数据数组传递给line()函数，该函数需要一组点数。另一种方法是更改调用函数以仅传入Points数组，类似这样（未经测试）：

.enter()
    .append("path")
    .attr("d", function(d) { return line(d.Points); })

来自多个数据D3j的多行

2 个答案: