1

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

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

1 回答 1

0

Try this out: http://jsfiddle.net/8vGm7/6/

combination of style + clear previous content from the container.

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)) + '%';
    });
}
于 2013-03-13T23:58:55.177 回答