D3 : 기존 막 대형 차트의 데이터를 변경하는 방법

Question

내 초기 막 대형 차트를 성공적으로 빌드했습니다. 이제 전환 효과를 사용하여 기존 차트에 막대를 추가하여 멋진 사용자 경험을 얻고 자합니다.

여기 내 코드입니다 :

var data = [23, 85, 67, 38, 70]; //dummy, normally much more 
labellist = ['label1','label2','label3','label4','label5']; 

var w = 815, 
    h = 500, 
    labelpad = 165, 
    x = d3.scale.linear().domain([0, 100]).range([0, w]), 
    y = d3.scale.ordinal().domain(d3.range(data.length)).rangeBands([0, h], .2); 

mySvg = d3.select("#chart") 
    .append("svg"); 

vis = mySvg.attr("width", w + 40) 
    .attr("height", h + 20) 
    .append("svg:g") 
    .attr("transform", "translate(20,0)"); 

bars = vis.selectAll("g.bar") 
    .data(data) 
    .enter().append("svg:g") 
    .attr("class", "bar") 
    .attr("transform", function(d, i) { return "translate(" + labelpad + "," + y(i) + ")"; }) 


bars.append("svg:rect") 

    .transition() 
    .duration(500) 
    .attr("width", x) 
    .attr("height", y.rangeBand()) 
    ; 



var rules = vis.selectAll("g.rule") 
    .data(x.ticks(10)) 
    .enter().append("svg:g") 
    .attr("class", "rule") 
    .attr("transform", function(d) { return "translate(" + x(d) + ", 0)"; }); 

rules.append("svg:line") 
    .attr("y1", h) 
    .attr("y2", h + 6) 
    .attr("x1", labelpad) 
    .attr("x2", labelpad) 
    .attr("stroke", "black"); 
rules.append("svg:line") 
    .attr("y1", 0) 
    .attr("y2", h) 
    .attr("x1", labelpad) 
    .attr("x2", labelpad) 
    .attr("stroke", "white") 
    .attr("stroke-opacity", .3); 

어떻게 프로그래밍 방식으로 추가하고 다른 막대를 제거하고 기존의 것들/아래로 밀어 수 있도록 데이터를 변경할 수 있습니까?

Answer 1

d3이 이전 세트에 있었던 것을 식별 할 수 있도록 막대의 데이터에 몇 가지 키 양식을 지정해야합니다. 기본값은 인덱스 기반이며 원하는 것일 수 있습니다.

는 지금까지 전이 가고, 당신은 이런 식으로 코드를 변경하려면 :

bars = vis.selectAll("g.bar") 
    .data(data); 

bars.enter().append("svg:g") 
    .attr("class", "bar") 
    .append("svg:rect"). 

bars.transition().duration(500) 
    .attr("transform", function(d, i) { 
     return "translate(" + labelpad + "," + y(i) + ")"; 
    }) 
    .selectAll("svg:rect") 
    .attr("width", x) 
    .attr("height", y.rangeBand()) 
; 

bars.exit().transition().duration(500) 
    .selectAll("svg:rect") 
    .attr("height", 0) 
    .remove(); 

"엔터()"기능을 가장 잘 즉시 구조를 만드는 데 사용됩니다. 그런 다음 초기 선택 객체 (막대)를 사용하여 새 데이터를 모든 요소에 적용합니다.

사용하지 않는 막대는 제거하고 싶을 수도 있습니다. 여기서는 0으로 크기를 조정 한 다음 제거했지만 원하는 효과를 얻으려면 그 값을 조정할 수 있습니다.