d3.js - d3.js -- 带有颜色类别的堆叠条

Question

我正在尝试使用 d3.js 中的堆栈布局构建堆积条形图（请参阅我在这里的位置：http://bl.ocks.org/4676028 ）。我已经正确显示和堆叠了条形图。但是我的数据存在差距，因此对于这些情况，我使用插值。因此，在我的数据文件中，每个数据类别都有两列：一列用于实际数值，另一列带有 0/1 标志，指示该值是否为插值。

我想要做的是检查标志，如果值被插值，改变矩形填充的颜色或不透明度。但我终其一生都无法弄清楚如何做到这一点——d3 的数据结构让我很困惑。非常感激任何的帮助。谢谢！

Answer 1

终于想通了；发布以防其他人遇到类似问题。您可以使用标准 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" ;}})