D3在分組條形圖上更新x軸組

我正在嘗試更新沿x軸（取決於數據）的不同組的分組條形圖。D3在分組條形圖上更新x軸組

這裏是小提琴：https://jsfiddle.net/mrl513/arjcq9ka/ 使用單選按鈕查看更新。

問題是我需要通過調用現有距離帶上的退出來更新x1域（範圍帶）。原始的範圍波段保留在前4個數據組上。

第一組數據集有4組。第二個數據集有8個組

你可以在小提琴上看到，當第二個按鈕被選中（它有8個gps）時，前4個gps保留原始範圍帶。

感謝您的任何意見！

function updategp(data) { 
    var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "state"; }); 
    data.forEach(function(d) {d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; }); 
}); 
    x0.domain(data.map(function(d) { return d.state; })); 
    x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]); 
    y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]); 


//etc.. see fiddle

來源

2016-08-12 mlewis

我不太瞭解您的數據，但在我看來，兩個視圖之間的數據並不相關。因此，我認爲您應該更改轉換，以便在您通過按下單選按鈕更改視圖時不會保留任何酒吧並將其移至其他位置。只有在兩種狀態相關的情況下才能使用保持和更改元素（例如，相同的組，但不同的年份）。從Mike Bostocks excellent guide到物體恆定性：

首先，動畫應該是有意義的。雖然在轉換過程中，酒吧可以在屏幕上飛行，但視覺效果令人印象深刻，但只有在增強理解的情況下才應使用動畫。不相關的數據集或維度之間的轉換（例如，從溫度到股價）應該使用更簡單的交叉淡入淡出而不是無謂的無意義運動。

所以在你的情況下，我會退出所有酒吧，將它們摺疊到x軸，然後通過從x軸展開它們來輸入新酒吧。要做到這一點，首先需要添加一個關鍵函數.data()，它確保新數據不會添加到現有元素，而是添加到新元素（不存在的元素）。一個可能的關鍵功能是如下：在最初的1000毫秒的延遲（或0毫秒的延遲

state.exit().transition().duration(1000).selectAll("rect") 
    .attr("y", height) 
    .attr("height", 0) 
    .remove();

，並輸入新的柱：

var state = chart.selectAll(".state") 
     .data(data, function(d){return JSON.stringify(d)});

然後通過將它們摺疊到x軸退出杆裝載）他們從x軸成長：

bars.enter().append("rect") 
    .attr("width", x1.rangeBand()) 
    .attr("x", function(d) { return x1(d.name); }) 
    .attr("y", height) //start from x-axis 
    .attr("height", 0) //with initial length of 0 
    .style("fill", function(d) { return color2(d.name); }); 

bars.transition() 
    .delay(function(){ 
     return state.exit()[0].length > 0 ? 1000 : 0; 
    }) 
    .duration(1000) 
    .attr("y", function(d) { return y(d.value); }) 
    .attr("height", function(d) { return height - y(d.value); }) 
    .style("fill", function(d) { return color2(d.name); });

我更新了fiddle顯示在行動這些變化。

來源

2016-08-13 18:42:51

我看到了問題並解決了它 - 在子組轉換過程中，我沒有調用width和x屬性，所以它們沒有被調用。

來源

2016-08-14 15:01:52 mlewis

D3在分組條形圖上更新x軸組

回答

相關問題