2

我有以下复杂的数据结构：

[
Object {id: 15, targets: Array[2]},
Object {id: 26, targets: Array[2]},
Object {id: 39, targets: Array[2]}
]

'targets'是一个对象数组。他们每个人都有这个形状：

Object {idTarget: "target1", events: Array[315]}
Object {idTarget: "target2", events: Array[310]}

'events'是一个具有要绘制的实际值的数组。所以，每个元素都有这个形状：

Object {timestamp: 1373241642, value: 1801.335}

现在，使用这个结构化数据集，我想'g'为每个外部对象（我指的是 15、26 和 39）创建一个 svg 组，并且在每个组内我想创建两行，每个目标一个，使用值'events'.

拥有一个平面数据集，很容易按照以下模式进行绘图：选择 + 数据 + 输入 + 追加，但是我在处理这个复杂的数据集时遇到了问题。

例如，我什至不知道如何分配一个键功能来启动。

svg.selectAll('.element')
.data(data, function(d){ return d.id + ?})

我想要这种钥匙'15target1', '15target2', '26target1', '26target2'等等。

您是否建议简化数据集以放弃拥有整齐组的可能性，或者这里有一种解决方法可以让我轻松绘制我想要的东西？

谢谢。

4

1 回答 1

5

您需要为此进行嵌套选择。你的代码看起来像这样。

var gs = d3.selectAll("g").data(data, function(d) { return d.id; });
gs.enter().append("g");

var line = d3.svg.line().x(function(d) { return xscale(d.timestamp); })
                        .y(function(d) { return yscale(d.value); });
gs.selectAll("path")
  .data(function(d) { return d.targets; }, function(d) { return d.idTarget; })
  .enter().append("path")
  .attr("d", function(d) { return line(d.events); });
于 2013-07-24T10:05:13.107 回答