D3.js - 레이아웃 - 값 액세서

Question

저는 방금 D3.js으로 시작했습니다. this example을 사용하여 간단한 도넛 차트를 만들었습니다. 내 문제는, 만약 내가 데이터 소스로 객체 배열을 가지고 있다면 - 예를 들어 데이터 포인트. 1 .foo 또는 1 .bar가 될 것입니다.이 둘 사이를 전환하려면 어떻게해야합니까? 내 현재의 솔루션은보기가 좋지 않으며 아래의 코드를 수행하는 적절한 방법이 될 수 없습니다.

//Call on window change event 
//Based on some parameter, change the data for the document 
//vary d.foo to d.bar and so on 

var donut = d3.layout.pie().value(function(d){ return d.foo}) 
arcs = arcs.data(donut(data)); // update the data 

나는 새로운 파이 함수를 정의 이외의 런타임에 value 접근을 설정할 수있는 방법이 있나요?

Answer 1

일반적으로 표시되는 데이터를 전환하려면 redraw() 함수를 만들어 차트의 데이터를 업데이트하십시오. 다시 그리기에서는 데이터 요소가 수정 될 때 수행해야 할 작업, 새 데이터 요소가 추가 될 때 수행되어야 할 작업 및 데이터 요소가 제거 될 때 수행해야 할 작업의 세 가지 경우를 처리해야합니다.

일반적으로 다음과 같습니다 (이 예는 패닝을 통해 데이터 세트를 변경하지만 실제로는 문제가되지 않습니다). 전체 코드는 http://bl.ocks.org/1962173입니다.

function redraw() { 

    var rects, labels 
     , minExtent = d3.time.day(brush.extent()[0]) 
     , maxExtent = d3.time.day(brush.extent()[1]) 
     , visItems = items.filter(function (d) { return d.start < maxExtent && d.end > minExtent}); 

    ... 

    // upate the item rects 
    rects = itemRects.selectAll('rect') 
     .data(visItems, function (d) { return d.id; }) // update the data 
     .attr('x', function(d) { return x1(d.start); }) 
     .attr('width', function(d) { return x1(d.end) - x1(d.start); }); 

    rects.enter().append('rect') // draw the new elements 
     .attr('x', function(d) { return x1(d.start); }) 
     .attr('y', function(d) { return y1(d.lane) + .1 * y1(1) + 0.5; }) 
     .attr('width', function(d) { return x1(d.end) - x1(d.start); }) 
     .attr('height', function(d) { return .8 * y1(1); }) 
     .attr('class', function(d) { return 'mainItem ' + d.class; }); 

    rects.exit().remove(); // remove the old elements 
}