0

我是 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,

}]

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

干杯!

4

2 回答 2

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) ) )
于 2013-06-18T18:31:09.500 回答
0

谢谢

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

/* 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);`
于 2013-06-24T11:56:12.553 回答