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" ;}})

d3.js - 带颜色分类的堆积条

1 个答案: