试图使d3js转换缩小或增长到下一个值

我想转换我创建的条形图的宽度。问题是在过渡期间，酒吧从0增长到n。我怎样才能让酒吧成长或缩小到宽度的新价值？这是我的jsfiddle ... http://jsfiddle.net/LAG2r/2/试图使d3js转换缩小或增长到下一个值

var codes = d3.range("A".charCodeAt(0), "Z".charCodeAt(0)).concat(d3.range("a".charCodeAt(0), "z".charCodeAt(0))), 
    chars = []; 

codes.forEach(function (c) { 
    var chr = String.fromCharCode(c); 
    chars.push(chr); 
}); 

function random(size) { 

    var string = '', 
     len = chars.length, 
     start = Math.floor(Math.random() * len); 

    return d3.shuffle(chars.slice(start, start + size)).join(''); 
} 

function createData(size) { 
    var data = []; 
    for (var i = 0; i < size; i++) { 
     data.push({ 
      name: random(6), 
      value: Math.random() * 1000 
     }); 
    } 
    return data; 
} 
var svg = d3.select('#yo').append('svg:svg').append('g:svg'); 



var x = d3.scale.linear() 
    .domain([0, 1000]) 
    .range([0, 490]) 
    .nice(); 

var y = d3.scale.ordinal() 
    .domain(d3.range(50)) 
    .rangeRoundBands([0, 490], .2); 

setInterval(function() { 

    var dataTarget = svg.selectAll(".bar") 
     .data(createData(50), function (d) { 
     return d.name; 
    }); 
    dataTarget.exit().remove(); 
    dataTarget.enter().append("rect") 
     .attr("class", "bar") 
     .attr("height", y.rangeBand()) 

     .attr("y", function (d, i) { 
     return y(i); 
    }) 
     .attr("x", function (d, i) { 
     return x(Math.min(0, d.value)); 
    }) 
     .transition() 
     .attr("width", function (d, i) { 
     return d.value; 
    }); 

}, 2000);

来源

2013-03-27 mitch

你似乎遇到了同样的问题我看到：http://stackoverflow.com/q/15651056/173225。我试图将更新选项添加到您的小提琴中，但它仍然会每次替换所有生成的DOM元素。 – 2013-03-27 17:20:41

两个问题在这里：

你给。数据（函数（d）{ 回报d.name; }）键功能）告诉维生素D3将每个数据点的名称关联起来。每次刷新它时，都会传入50个具有不同随机名称的新数据对象，因此D3会丢失关联。因此，每次刷新时，那里的所有数据都将进入“exit（）”数据连接，并且新数据将进入“enter（）”数据连接。如果我们不提供关键功能，d3将基于索引，我认为这更接近我们想要的。其次，你没有“更新”数据连接 - 只有一个有转换的输入。我们需要在底部添加此：

dataTarget 
.transition() 
.duration(1000) 
.attr("width", function (d, i) { 
    return d.value; 
});

我这里修订与我认为的jsfiddle是你的目标：http://jsfiddle.net/LAG2r/3/

来源：http://bost.ocks.org/mike/join/

来源

2013-03-27 17:28:46 ne8il

啊......我明白了。所以我的下一个问题是不按照我应该这样做的方式提供密钥（严格按索引进行）或者我应该使用现有的50个对象，更新它们，并重新应用数据（）。enter（）？而且，我是否应该像在这里一样调用两次转换（使用更新功能）？我觉得在代码中需要有一些冗余，以便像这样工作。谢谢！ – mitch 2013-03-27 17:42:52

“transition（）”只是告诉d3在起始值和结束值之间进行补间，这就是为什么输入/更新都是“动画”的原因。如果您实际上正在更新数据（而不是生成一组新的随机数据），您可能需要一个关键数据关联函数。 – ne8il 2013-03-27 18:00:39

我想我的问题实际上是为什么要在代码中调用transition（）两次，而不是一次。我删除了第二次转换，并注意到只有一个转换，但没有后续转换。我疯狂地认为一个transition（）调用应该足够每个区间（相对于两个）？再次感谢。 – mitch 2013-03-27 18:03:03

试图使d3js转换缩小或增长到下一个值

回答

相关问题