Javascript D3.js如何在组条形图中唯一标识单个条形图

我使用D3.js创建了组条形图。每组有2根杠。单击任何栏时，必须使用自定义警报框显示一些数据。现在，该栏可以单击并显示数据

var state=svg.selectAll.TestSuite .数据 .enter.appendg .attrclass，TestSuite .onclick，函数d，i{ ifi==0{ Alert.renderd3。选择this.data[0]。FalseStatements； }否则{ Alert.renderd3.选择this.data[0].TrueStatements； } } .attr变换，函数d{ 返回translate+x0d.TestSuite+，0；

---

}; 我不确定我是否完全理解您的要求，但识别任何元素/实体的最佳方法是使用id，如下所示：

var state = svg.selectAll(".TestSuite")
  .data(data)
  .enter().append("g")
  .attr("class", "TestSuite")
  .on("click", function(d,i) {
    var barId;
    if(i==0){
      barId = 'falseBar_' + i;
      Alert.render(d3.select(this).data()[0].FalseStatements);
    }else{
      barId = 'trueBar_' + i;
      Alert.render(d3.select(this).data()[0].TrueStatements);
    }
    d3.select(this).attr('id', barId);
  })
  .attr("transform", function (d) {
    return "translate(" + x0(d.TestSuite) + ",0)";
});

state.selectAll("rect")
  .data(function(d) { return d.ages; })
.enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("id", function(d, i) {return 'bar_' + i}) // <-- Edited line
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

d3.selectthis.attrid，函数d，i{return'bar\uu'+i}

将其添加到创建条形图的迭代函数中。这样，您就可以使用d3从代码中的任何位置选择它们

如果您只想识别每个条，它将如下所示：

var state = svg.selectAll(".TestSuite")
  .data(data)
  .enter().append("g")
  .attr("id", function(d,i) {return 'bar_' + i})
  .attr("class", "TestSuite")
  .on("click", function(d,i) {
    if(i==0){
      Alert.render(d3.select(this).data()[0].FalseStatements);
    }else{
      Alert.render(d3.select(this).data()[0].TrueStatements);
    }
  })
  .attr("transform", function (d) {
    return "translate(" + x0(d.TestSuite) + ",0)";
});

如果您想用与其内容相关的Id标识每个酒吧的真实或虚假声明，我建议如下：

var state = svg.selectAll(".TestSuite")
  .data(data)
  .enter().append("g")
  .attr("class", "TestSuite")
  .on("click", function(d,i) {
    var barId;
    if(i==0){
      barId = 'falseBar_' + i;
      Alert.render(d3.select(this).data()[0].FalseStatements);
    }else{
      barId = 'trueBar_' + i;
      Alert.render(d3.select(this).data()[0].TrueStatements);
    }
    d3.select(this).attr('id', barId);
  })
  .attr("transform", function (d) {
    return "translate(" + x0(d.TestSuite) + ",0)";
});

state.selectAll("rect")
  .data(function(d) { return d.ages; })
.enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("id", function(d, i) {return 'bar_' + i}) // <-- Edited line
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

在任何情况下，这将为每个条指定一个唯一的Id，即为每个条指定bar_25或falseBar_14，为您提供一种识别每个条的理想方法

编辑：OP向我展示了他们正在使用的实际代码后，下面是我对解决方案的建议，这些建议实际上与上面的代码在同一行

您实际上应该修补的代码是您发布的代码下面的代码。它是渲染实际条形图的位置：

state.selectAll("rect")
  .data(function(d) { return d.ages; })
.enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

我建议将id属性添加到每个条中，如下所示：

var state = svg.selectAll(".TestSuite")
  .data(data)
  .enter().append("g")
  .attr("class", "TestSuite")
  .on("click", function(d,i) {
    var barId;
    if(i==0){
      barId = 'falseBar_' + i;
      Alert.render(d3.select(this).data()[0].FalseStatements);
    }else{
      barId = 'trueBar_' + i;
      Alert.render(d3.select(this).data()[0].TrueStatements);
    }
    d3.select(this).attr('id', barId);
  })
  .attr("transform", function (d) {
    return "translate(" + x0(d.TestSuite) + ",0)";
});

state.selectAll("rect")
  .data(function(d) { return d.ages; })
.enter().append("rect")
  .attr("width", x1.rangeBand())
  .attr("id", function(d, i) {return 'bar_' + i}) // <-- Edited line
  .attr("x", function(d) { return x1(d.name); })
  .attr("y", function(d) { return y(d.value); })
  .attr("height", function(d) { return height - y(d.value); })
  .style("fill", function(d) { return color(d.name); });

---

重要的是，您要理解为什么这一点，而不是您最初提供的代码块是相关的。正如您所说的，第一个块呈现每组条形图，因此是表示svg组的append。第二个块以appendrect开始，它表示svg矩形。此行和其他行，即stylefill…、attrx。。。和属性。。。显然，这个块是处理实际条而不是组的块。

单击事件回调可以包含两个参数，第一个对应于绑定到单击元素的数据。尝试类似于ˋ.onclick、functiond、i{console.logd；}`的方法，看看这是否是您正在查找的数据for@Hugues我对我的问题做了更多的编辑。ˋ.onclick，functiond，i{console.logd；}`包含我需要显示的数据，但是如何唯一地标识条？您能告诉我您在给定代码中所指的id是什么吗？@DesiDelite是的，每个元素都可能包含一个“id”属性，因此可以唯一地标识它。不要在代码中再次将其分配给任何其他元素，这一点很重要。下面是关于如何使用它们的另一个很好的例子：我的回答的意思是，如果我不够明确，我很抱歉，id的主要大小写用法正是您在这里向我们提出的问题，即需要唯一标识元素。@DesiDelite我上一次编辑显示了您的代码应该是什么样子。这里我的值属于一个组。在这个例子中，CA是一个组，它有7个条，CA->i=0，TX->i=1等等。那么你说话的方式是在一个组中为所有酒吧设置相同的id，不是吗？我真的很抱歉，但我还是不明白，帮我解决这个问题。@DesiDelite别担心，我们会的。现在我看到了你的例子，我明白了。我不知道每个“I”代表一个完整的组，阅读你的URL中提供的代码，你可以看到你在问题中给出的代码片段与你在上述评论中对每个组条所说的相关。下面的代码块处理每个单独的条，其中一条以state.selectAllrect开头。我新编辑的答案应该能向你们说明我的建议。