Question

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

我认为它取像素高度并意外地将其转换为百分比。假设我将高度设置为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)) + '%';
    });
}

D3中的过渡百分比似乎不起作用

1 个答案: