如何在d3中绘制带有复杂数据结构的折线图 [英] How to draw line charts with complex data structures in d3

问题描述

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

  [
 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} 
  
 
 
现在，对于这个结构化数据集，我想创建一个svg组'g'每个外部对象（我指的是15,26和39），在每个组内部我想使用'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）;}）; 
  
 
I have the following complex data structure:
[
Object {id: 15, targets: Array[2]},
Object {id: 26, targets: Array[2]},
Object {id: 39, targets: Array[2]}
]
'targets' is an array of objects. Each of them has this shape:
Object {idTarget: "target1", events: Array[315]}
Object {idTarget: "target2", events: Array[310]}
'events' is an array with the real values to plot. 
So, each element has this shape:
Object {timestamp: 1373241642, value: 1801.335}
Now, with this structured dataset, I would like to create an svg group 'g' for each external object (I am referring to 15, 26 and 39) and inside each group I want to create two lines, one for each target, using the values in 'events'.

Having a flat dataset it's easy to proceed in the drawing following the pattern: select + data + enter + append, but I am having trouble with this complex dataset.

For example I don't even know how to assign a key function to start.
svg.selectAll('.element')
.data(data, function(d){ return d.id + ?})
I would like to have this kind of keys '15target1', '15target2', '26target1', '26target2' and so on. 

Do you recommend to simplify the dataset giving up the possibility of having neat groups or there is a workaround here that lets me easily draw what I want? 

Thanks.
解决方案
You want nested selections for this. Your code would look something like this.
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); });


                        
这篇关于如何在d3中绘制带有复杂数据结构的折线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！