D3中的转换百分比似乎不起作用 [英] Transitioning percentages in D3 doesn't seem to work

问题描述

我正在制作一个可视化，其中我堆叠矩形，并使它们的容器的高度的一些百分比，但试图运行一个过渡似乎在开始转换之前将每个矩形的高度重置为一些其他值。 / 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））+ ％'; 
}）; 
} 
  

解决方案

$ b 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））+'％'; 
}）; 
} 
  

I'm working on a visualization where I stack rectangles and make them some percentage of the height of the container, but trying to run a transition seems to reset the height of each rectangle to some other value before starting the transition.

I think it's taking the pixel height and accidentally translating it to a percentage. Let's say I set height to 13%, and 13% represents a height of 45px. Let's then say I want to transition it to 10%. When I start the transition, the height jumps to 45% (45px->45%), then rolls to 10%.

I don't know where to look in the D3 code for this. Here's a fiddle showing the behavior: 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)) + '%';
    });
}

解决方案

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)) + '%';
    });
}

这篇关于D3中的转换百分比似乎不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！