d3.js - 與顏色類別堆積的酒吧

我正在嘗試使用d3.js中的堆棧佈局來構建堆積的條形圖（請參閱我在這裏：http://bl.ocks.org/4676028）。我已經正確顯示和堆疊了條形圖。但是我的數據存在差距，因此對於那些使用插值的實例。所以在我的數據文件中，每個數據類別都有兩列：一列用於實際數值，另一列用0/1標誌指示值是否爲插值。d3.js - 與顏色類別堆積的酒吧

我想要做的是檢查標誌，如果插值，以改變矩形填充的顏色或不透明度。但是我不能爲了我的生活而弄清楚如何做到這一點--d3的數據結構讓我非常失望。非常感激任何的幫助。謝謝！

來源

2013-02-03 user1866670

終於想通了;發帖以防其他人遇到類似問題。您可以使用標準的JavaScript語法訪問不同的數組。唯一棘手的是，在d3的堆棧佈局中，索引值（i）爲堆棧中的每個系列重置。所以你需要某種類型的計數器值，每次開始一個新的系列時跟蹤這個增量。

var n = 0; 
var rect = tnum.selectAll("rect") 
    .data(function(d) {return(d)}) 
.enter().append("svg:rect") 
    .attr("x", function(d) { return x(d.x); }) 
    .attr("y", function(d) { return -y(d.y0) - y(d.y); }) 

    .attr("height", function(d) { return y(d.y); }) 
    .attr("width", x.rangeBand()) 
    .attr("title", function(d) { return d.x; }) 
    .attr("class", function(d) { return d.y; }) 
    .style("opacity", function(d, i) { 


    if(i === interp[0].length-1 && n < 2) { 
    n+=1; 
    } 
    var flag = interp[n][i].int; 

    console.log(); 

    if (flag == 1) {return "0.85"} // if close is less than 400 fill = red 
     else { return "1" ;}})

來源

2013-02-07 03:24:26 user1866670

d3.js - 與顏色類別堆積的酒吧

回答

相關問題