Question

我在设置区域图高度的动画时遇到问题。我需要根据提供的数据增加/减少高度。截至目前，它只是改变颜色。

我在绘图时添加了.transition（）。duration（3000），但它只对颜色动画有效，而不是对高度有影响。

我甚至尝试在该部分插入高度属性，结果仍然相同。

function plotGraph(eventName){
  (function() {
  var COLORS, DATA, DATA_COUNT, H, M, W, area, oH, oW, plot, randomize, stack, stacked_data, xScale, yScale;

  COLORS = ["#ed6c44","#ffb230","#4c4743"];

  randomize = function(min, max) {
    return Math.floor(Math.random() * (max - min) + min);
  };

  DATA_COUNT = 15;

  if(eventName === "Event 1"){
    DATA = [39, 36, 5, 13, 38, 1, 47, 35, 28, 38, 12, 43, 3, 5, 9];
  }
  else if(eventName === "Event 2"){
    DATA = [37, 18, 45, 32, 39, 1, 35, 6, 0, 46, 10, 9, 34, 0, 10];
  }
  else if(eventName === "Event 3"){
    DATA = [40, 7, 16, 29, 16, 18, 38, 40, 2, 25, 3, 13, 35, 47, 19];
  }
  else{
    DATA = [39, 36, 5, 13, 38, 1, 47, 35, 28, 38, 12, 43, 3, 5, 9];
  }

  var counter = 0;

  DATA = d3.range(3).map(function() {
    counter = 0;
    return d3.range(DATA_COUNT).map(function() {
      for(i=counter;i<DATA.length;i++){
        counter++;
        return DATA[i];
      }     
      /*return randomize(0, 50);*/
    });
  });

  M = {
    top: 20,
    bottom: 0,
    left: 0,
    right: 0
  };

  oW = 450;

  oH = 100;

  W = oW - M.left - M.right;

  H = oH - M.top - M.bottom;

  plot = d3.select('#chart').append('svg').attr('width', oW).attr('height', oH).append('g').attr('transform', "translate(" + M.left + ", " + M.top + ")");

  xScale = d3.scale.linear().domain([0, DATA_COUNT - 1]).range([0, W]);

  yScale = d3.scale.linear().domain([0, 100]).range([H, 0]);

  area = d3.svg.area().x(function(d) {
    return xScale(d.x);
  }).y0(function(d) {
    return yScale(d.y0);
  }).y1(function(d) {
    return yScale(d.y0 + d.y);
  }).interpolate('basis');

  stack = d3.layout.stack();

  stacked_data = stack(DATA.map(function(d) {
    return d.map(function(d, i) {      
      return {
        x: i,
        y: d
      };
    });
  }));

  plot.selectAll('path').data(stacked_data).enter().append('path').transition().duration(3000).attr('d', area).attr('fill', function(d, i) {    
    console.log(COLORS[i]);
    return COLORS[i];    
  });    

}).call(this);
}

d3堆积区域图的转换

0 个答案: