在D3中转换百分比似乎不起作用

Question

我正在处理一个可视化对象，其中堆叠矩形并将它们设置为容器高度的某个百分比，但尝试运行转换似乎重置了每个矩形的高度到开始转换之前的其他值。

我认为这是采取像素高度，并意外翻译成一个百分比。假设我将身高设置为13％，13％代表45px的身高。那么让我们说我想把它转换成10％。当我开始转换时，高度跳到45％（45px-> 45％），然后滚动到10％。

我不知道该在D3代码中查找的位置。这里的展示行为的小提琴：http://jsfiddle.net/8vGm7/

function reload() { 
    var newArray = []; 
    var i, sum = 0, nextVal; 

    for(i = 0; i < 10; i++) { 
    nextVal = Math.random(); 
    newArray.push(nextVal); 
    sum += nextVal; 
    } 

    var container = d3.select('#container'); 
    var join = container.selectAll('div.row').data(newArray); 

    join.enter().append('div').style('height', '0%') 
    .style('background-color', function(d,i) { 
     return ['red', 'green', 'blue', 'orange', 'yellow', 'purple', '#ff0', '#0ff', '#000', '#66F'][i]; 
    }) 
    .attr('class', 'row'); 

    join.transition().duration(2000) 
    .style('height', function(d) { 
     return (100e0 * (d/sum)) + '%'; 
    }); 
} 

Answer 1

尝试了这一点： http://jsfiddle.net/8vGm7/6/

的风格+从容器清楚以前的内容组合。

var colors = ['red', 'green', 'blue', 'orange', 'yellow', 'purple', '#ff0', '#0ff', '#000', '#66F'];  
function reload() { 
    var i=0, 
     sum = 0, 
     newArray = [], 
     nextVal, 
     container, 
     join; 

    for(i = 0; i < 10; i++) { 
     nextVal = Math.random(); 
     newArray.push(nextVal); 
     sum += nextVal; 
    } 

    document.querySelector('#container').innerHTML = ''; 
    container = d3.select('#container'); 
    join = container.selectAll('div.row').data(newArray); 

    join 
    .enter() 
    .append('div') 
    .attr('style', function(d,i){ 
     return 'height:0%; background-color: ' + colors[i]; 
    }) 
    .attr('class', 'row'); 

    join 
    .transition() 
    .duration(2000) 
    .style('height', function(d) { 
     return (100e0 * (d/sum)) + '%'; 
    }); 
}