試圖使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轉換縮小或增長到下一個值

回答

相關問題