Question

我是D3.js的新手。我喜欢它，但我在确定构建数据的最佳方法时遇到了麻烦。

我希望创建一个简单的多线图，它在所选点上有超点。首先我创建了多行但是尝试添加点已经让我感到困惑，我认为它与我的数据结构有关。

Here is my working fiddle。我不确定我是否应该尝试使用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,

}]

任何帮助都会受到赞赏，我已经好几天了。

干杯！

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

Answer 2

由于

我最终使用了类似的东西。

/* 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);`

带点的D3多线图

2 个答案: