D3 : 중첩 된 데이터

Question

에서 색칠 여러 줄 나는 현재하고 너무 같은 형식 JSON 개체의 배열에서 데이터 포인트에서 원 일부 선 그래프를 조립 해요 :

나는 각 메트릭에 대한 색상을 갖고 싶어

var data = [{ 
    "name": "metric1", 
    "datapoints": [ 
     [10.0, 1333519140], 
     [48.0, 1333519200] 
    ] 
}, { 
    "name": "metric2", 
    "datapoints": [ 
     [48.0, 1333519200], 
     [12.0, 1333519260] 
    ] 
}] 

, 그래서 나는 배열 데이터 내의 객체 의 인덱스를 기반으로 그들을 색칠하려고합니다. 나는 빨간색과 파란색 원을 교대로받을

circles.enter().append("circle") 
    .attr("r", 3.5); 
    .style("fill", function(d,i) { return i%2 ? "red" : "blue"; } 

예상 할 수 있기 : 내가 좋아하는 뭔가를 마지막 비트가 있음을 변경하는 경우 이제

// We bind an svg group to each metric. 
var metric_groups = this.vis.selectAll("g.metric_group") 
    .data(data).enter() 
    .append("g") 
    .attr("class", "metric_group"); 

// Then bind a circle for each datapoint. 
var circles = metric_groups.selectAll("circle") 
.data(function(d) { return d.datapoints; }); 

circles.enter().append("circle") 
    .attr("r", 3.5); 

: 난 그냥 원을 배치하기위한 현재이 코드는 같다 . Nested Selections : 'Nesting and Index'에서 몇 가지 조언을 촬영
, 나는 시도 :

circles.enter().append("circle") 
    .attr("r", 3.5); 
    .style("fill", function(d,i,j) { return j%2 ? "red" : "blue"; } 

작동하지 않는 (j는 정의되지 않는다), 우리는 오히려 배열 요소보다는 명명 된 속성 데이터 포인트에 아마도 때문이다. 데이터 구조를 변경하지 않고 원하는 채색 작업을 수행하려면 어떻게해야합니까? 감사!

Answer 1

여기에 가장 쉬운 것은 원이 부모 G 요소에서 채우기 스타일 상속하는 것입니다 : 당신이 CSS 클래스로 범주 색상을 정의한 경우

var color = d3.scale.category20(); 

var metricGroup = vis.selectAll(".metric-group") 
    .data(data) 
    .enter().append("g") 
    .attr("class", "metric-group") 
    .style("fill", function(d) { return color(d.name); }); 

var circle = metricGroup.selectAll("circle") 
    .data(function(d) { return d.datapoints; }) 
    .enter().append("circle") 
    .attr("r", 3.5); 

, 당신은 또한 동적 클래스 이름을 사용할 수 및 해당 CSS로

var metricGroup = vis.selectAll(".metric-group") 
    .data(data) 
    .enter().append("g") 
    .attr("class", function(d) { return "metric-group " + color(d.name); }); 

: 그런 식으로 상속

.metric1 circle { fill: red; } 
.metric2 circle { fill: blue; } 

또 다른를 접근 방식은 상위 데이터에 액세스 할 each을 사용하는 것입니다

metricGroup.each(function(p, j) { 
    d3.select(this).selectAll("circle") 
     .data(p.datapoints) 
    .enter().append("circle") 
     .attr("r", 3.5) 
     .style("fill", color(p.name)); 
}); 

나는 또한 일하는 것이 그룹 인덱스 j를 사용하여 생각을; 왜 당신에게 정의되지 않았는지 모르겠지만 코드 예제에 (.attr("r", 3.5);에) 가짜 세미콜론이 있으므로 뭔가 다른 일이있을 수 있습니다. 어쨌든 그룹 인덱스보다는 데이터에서 범주 색을 유도하는 것이 더 관용적이므로 위의 기술 중 하나를 사용합니다.

Answer 2

내 시각화 중 하나에서 나는 동일한 문제가있었습니다.

var count = 0; 

var color = d3.scale.category20(); 

var metric_groups = this.vis.selectAll("g.metric_group") 
    .data(data).enter() 
    .append("g") 
    .attr("class", "metric_group"); 

var circles = metric_groups.selectAll("circle") 
    .data(function(d) {return d.datapoints;}); 

circles.enter().append("circle") 
    .attr("r", 3.5) 
    .style("fill", function(d,i){ 
    d.number = count; 
    count++; 
    return color(d.number); 
    }); 

키는 각 데이텀을 해당 요소를 다른 그룹간에 고유 한 색상을 제공하기 위해 사용될 수있는 고유 한 특성을 제공하는 것 : 내 용액은은 (사용자의 예에 적용) 다음이었다.

나는이 솔루션이 도움이 되었기를 바랍니다.