来自多个数据D3J的多行

我希望以下代码在同一SVG上绘制两条不同的行，但它仅返回两个空的路径>

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

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

问题是，您将整个对象从数据数组传递给line()函数，该功能期望要点数组。一种替代方法是更改调用函数以仅通过Points数组，类似的(未经测试(：

：

.enter()
    .append("path")
    .attr("d", function(d) { return line(d.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 }))

相关内容

最新更新

热门标签：