javascript - D3 中的百分比转换似乎不起作用

Question

我正在研究一个可视化，其中我堆叠矩形并使它们占容器高度的一定百分比，但尝试运行转换似乎会在开始转换之前将每个矩形的高度重置为其他值。

我认为它获取了像素高度并意外地将其转换为百分比。假设我将高度设置为 13%，13% 代表高度为 45px。假设我想将其转换为 10%。当我开始过渡时，高度跳至 45% (45px->45%)，然后滚动至 10%。

我不知道在 D3 代码中哪里可以找到这个。这是显示行为的 fiddle :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)) + '%';
    });
}