帶點的D3多線圖

Question

我是D3.js的新手。我喜歡它，但我很難找出構建數據的最佳方法。

我會理想地想創建一個簡單的多線圖，它具有超過所選點的點數。首先，我創建了多條線，但試圖添加點使我難住，我認爲這與我的數據結構有關。

Here is my working fiddle。我不知道我是否應該嘗試使用d3.nest重新排列數據

我有一個json對象，我從Google表格中檢索，這些對象都很好，很流暢。這就是它的樣子：

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