Charts D3带点多线图

我是D3.js的新手。我喜欢它，但我真的很难找到构造数据的最佳方法

理想情况下，我希望创建一个简单的多行图，该图在选定的点上有多个点。首先，我创建了多条线，但试图添加点让我感到困惑，我认为这与我的数据结构有关

。我不确定是否应该尝试使用d3.nest来重新排列数据

我有一个json对象，我正在从一个谷歌表单中检索它，它非常漂亮、平滑。这就是它看起来的样子：

var data = [{
"description": "Global warming is a serious and pressing problem. We should begin taking steps now even if this involves significant costs",
"year2013": 40,
"year2012": 36,
"year2011": 41,
"year2010": 46,
"year2009": 48,
"year2008": 60,
"year2006": 68,
}, {
"description": "The problem of global warming should be addressed, but its effects will be gradual, so we can deal with the problem gradually by taking steps that are low in cost",
"year2013": 44,
"year2012": 45,
"year2011": 40,
"year2010": 40,
"year2009": 39,
"year2008": 32,
"year2006": 24,
}, {
"description": "Until we are sure that global warming is really a problem, we should not take any steps that would have economic costs",
"year2013": 16,
"year2012": 18,
"year2011": 19,
"year2010": 13,
"year2009": 13,
"year2008": 8,
"year2006": 7,

}, {
"description": "Don't know / refused",
"year2013": 1,
"year2012": 1,
"year2011": 1,
"year2010": 1,
"year2009": 1,
"year2008": 0,
"year2006": 1,

}]

任何帮助都将不胜感激，我已经做了好几天了

---

干杯

首先-我会将您的数据展平

data = [
 {date:"2011",type: "line0", amount:20}
 ...
]

然后按类型嵌套数据

nested = d3.nest()
 .key( (d) -> return d.type )
 .entries(data)

然后追加您的行组

# Line Groups
groups = container.selectAll('g.full-line')
  .data(nested, (d) -> return d.key )

# ENTER
groups.enter().append('svg:g')
.attr( 'class', (d,i) -> "full-line#{i}" )

# EXIT
d3.transition(groups.exit()).remove()

# TRANSITION
d3.transition(groups)

然后添加图表行

# Individual Lines
lines = groups.selectAll('.line').data (d)-> [d.values]

# ENTER
lines.enter().append("svg:path")
 .attr("class","line")
 .attr("d", d3.svg.line()
  .interpolate(interpolate)
  .defined(defined)
  .x( (d,i) -> return xScale(d,i) )
  .y( (d,i) -> return yScale(d,i) ) )

# EXIT
d3.transition( groups.exit().selectAll('.line') )
  .attr("d", 
    d3.svg.line()
      .interpolate(interpolate)
      .defined(defined)
      .x( (d,i) -> return xScale(d,i) )
      .y( (d,i) -> return yScale(d,i) ) )

# TRANSITION
d3.transition(lines)
  .attr("d", 
 d3.svg.line()
   .interpolate(interpolate)
   .defined(defined)
       .x( (d,i) -> return xScale(d,i) )
       .y( (d,i) -> return yScale(d,i) ) )

谢谢

我最终使用了类似的东西

/* Transform Data */
data = data.map(function (d) {
    return {
      country: d.country,
         date: new Date(d.year.toString()),
         value: d.value
     };
});

/* Nest Data */
data = d3.nest().key(function (d) {
    return d.country;
}).entries(data);`