D3.js 如何在d3中绘制具有复杂数据结构的折线图
我有以下复杂的数据结构:D3.js 如何在d3中绘制具有复杂数据结构的折线图,d3.js,D3.js,我有以下复杂的数据结构: [ Object {id: 15, targets: Array[2]}, Object {id: 26, targets: Array[2]}, Object {id: 39, targets: Array[2]} ] “目标”是一个对象数组。它们每个都有这样的形状: Object {idTarget: "target1", events: Array[315]} Object {idTarget: "target2", events: Array[310]} O
[
Object {id: 15, targets: Array[2]},
Object {id: 26, targets: Array[2]},
Object {id: 39, targets: Array[2]}
]
“目标”
是一个对象数组。它们每个都有这样的形状:
Object {idTarget: "target1", events: Array[315]}
Object {idTarget: "target2", events: Array[310]}
Object {timestamp: 1373241642, value: 1801.335}
“事件”
是一个带有要绘制的实际值的数组。
因此,每个元素都有这样的形状:
Object {idTarget: "target1", events: Array[315]}
Object {idTarget: "target2", events: Array[310]}
Object {timestamp: 1373241642, value: 1801.335}
现在,有了这个结构化数据集,我想为每个外部对象(我指的是15、26和39)创建一个svg组'g'
,在每个组中,我想使用'events'
中的值为每个目标创建两行
拥有一个平面数据集在图形中按照以下模式进行操作很容易:select+data+enter+append,但是我在处理这个复杂的数据集时遇到了问题
例如,我甚至不知道如何分配一个键函数来启动
svg.selectAll('.element')
.data(data, function(d){ return d.id + ?})
我想要这类钥匙“15target1”、“15target2”、“26target1”、“26target2”等等
您是否建议简化数据集,放弃整齐分组的可能性,或者这里有一个变通方法,让我可以轻松地绘制我想要的内容
谢谢。你想要这个。你的代码看起来像这样
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); });
这真的很有帮助。谢谢