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

我正在尝试使用d3.js中的堆栈布局构建一个堆叠条形图（请参阅此处的位置：）。我已经正确地显示和堆叠了这些条。但我的数据中存在缺口，因此对于这些实例，我使用插值。因此，在我的数据文件中，每类数据都有两列：一列用于实际数字值，另一列带有0/1标志，指示值是否为插值

---

我想做的是检查标志，如果值是插值的，改变矩形填充的颜色或不透明度。但我一辈子都不知道该怎么做——d3的数据结构让我非常困惑。任何帮助都将不胜感激。谢谢

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

var n=0；
var rect=tnum.selectAll（“rect”）
.data（函数（d）{return（d）}）
.enter（）.append（“svg:rect”）
.attr（“x”，函数（d）{返回x（d.x）；}）
.attr（“y”，函数（d）{return-y（d.y0）-y（d.y）；}）
.attr（“高度”，函数（d）{返回y（d.y）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“title”，函数（d）{return d.x；}）
.attr（“类”，函数（d）{return d.y；}）
.style（“不透明”，函数（d，i）{
如果（i==interp[0]。长度-1&&n<2）{
n+=1；
}
var flag=interp[n][i].int；
console.log（）；
if（flag==1）{return“0.85”}//if close小于400 fill=red
else{返回“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" ;}})

var n=0；
var rect=tnum.selectAll（“rect”）
.data（函数（d）{return（d）}）
.enter（）.append（“svg:rect”）
.attr（“x”，函数（d）{返回x（d.x）；}）
.attr（“y”，函数（d）{return-y（d.y0）-y（d.y）；}）
.attr（“高度”，函数（d）{返回y（d.y）；}）
.attr（“宽度”，x.rangeBand（））
.attr（“title”，函数（d）{return d.x；}）
.attr（“类”，函数（d）{return d.y；}）
.style（“不透明”，函数（d，i）{
如果（i==interp[0]。长度-1&&n<2）{
n+=1；
}
var flag=interp[n][i].int；
console.log（）；
if（flag==1）{return“0.85”}//if close小于400 fill=red
else{返回“1”；}）