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