포인트가있는 d3 꺾은 선형 차트의 문제

Question

내 주요 문제는 내 데이터가 모든 d3 데모와 정확히 같지 않다는 것입니다. 그래서

var line = d3.svg.line() 
    .x(function(d) { return x(d.x); }) 
    .y(function(d) { return y(d.y); }); 

// data is a list of objects, each of which respresents a line 
var series = svg.selectAll(".series") 
    .data(dataSimplified) 
    .enter().append("g") 
    .attr("class", "series"); 

series.append("path") 
    .attr("class", "line") 
    // the following function requires a list of things, like [{x0, y0}, {x1, y1}, ... {xn, yn}] 
    .attr("d", function(d) { return line(d.values); }) 
    .style("stroke", function(d) { return color(d.name); }); 

그것은 기본적으로 각 "값"필드을 반복하여 수행합니다

[{"name":"someName", "values":[{x1, y1}, {x2, y2}, ... {xn, yn}, ...] 

그래서이 코드 라인을 위해 잘 작동합니다 : 나는 양식에 내 모든 데이터를 정규화 플러그인을 만들어 x와 y를 얻기위한 라인 함수. 그러나 만약 내가 비슷한 점을한다면, 그것은 효과가 없습니다! 그러나 다음은 작동합니다.

// add points 
for(var i=0; i<dataSimplified.length; i++){ 
    for(var j=0; j<dataSimplified[i].values.length; j++){ 
     svg.append("circle") 
      .attr("r", 3.5) 
      .attr("cx", function(d){ return x(dataSimplified[i].values[j].x); }) 
      .attr("cy", function(d){ return y(dataSimplified[i].values[j].y); }) 
      .attr("fill", function(d){ return color(dataSimplified[i].name); }); 
    } 
} 

포인트를 하나씩 추가하는 것보다 더 좋은 방법이 있습니까? 왜 cx가 경로와 같은 목록을 받아들이지 않습니까?

Answer 1

nested selections (이 경우 <circle> 태그는 <g> 태그 내부에 중첩 됨)에 대해 .data을 다시 호출 할 수 있습니다. 이런 식으로 뭔가가 :

series.selectAll('circle') 
    .data(function(d, i, j) { return d.values; }) 
    .enter().append('circle') 
     .attr("r", 3.5) 
     .attr("cx", function(nd){ return x(nd.x); }) 
     .attr("cy", function(nd){ return y(nd.y); }) 
     .attr("fill", function(nd, i, j){ return color(dataSimplified[j].name); }); 

는 라인과 원 사이의 일관성이 보인다 이유 D3는 (HTML 또는 SVG) 기본이되는 DOM 노드를 통해서만 얇은 층이다, 당신에서 그 멀리 추상적하지 않습니다. 따라서 svg에서 <path>은 내부 점 목록을 포함하는 단일 태그이고 <circle>은 단지 하나의 원입니다. 따라서 한 시리즈에 대한 구조는 (데이터 포인트가 3 개인 경우) 이와 유사합니다.

<g><path/><circle/><circle/><circle/></g> 

그래서 코드에는 동일한 종류의 구조가 반영됩니다.