Javascript D3-检索与图表中单击的元素关联的数据

我有一个堆叠条形图，它是使用D3正确构建的。 原始数据如下所示：

var originalData = {
            
header: ["label", "count", "missing"],
rows:   [
            {label: "A", count: 0, missing: 0},
            {label: "B", count: 24, missing: 59},
            {label: "C", count: 6, missing: 77},
            {label: "D", count: 7, missing: 76},
            {label: "E", count: 2, missing: 81},
            {label: "F", count: 7, missing: 76},    
            {label: "G", count: 0, missing: 83}
        ]
};

[
    [[0,0],[0,24],[0,6],[0,7],[0,2],[0,7],[0,0]]
    [[0,0],[24,83],[6,83],[7,83],[2,83],[7,83],[0,83]]
]

onBarClick = (event, data) => {

    ...    
}

var barGroupTag = this.svg.selectAll()
                       .data(barChartObject)
                       .enter()
                       .append("g")

barGroupTag.selectAll("rect")
        .data(d => d)
        .enter()
        .append("rect")
        ...
        .on("mouseover", this.onMouseOverBar)
        .on("mouseout", this.onMouseOutBar)
        .on('click', this.onBarClick);

因此，每个条都是一组条，表示计数和缺失数量的数量。 此

originalData

被传递到

d3.stack

函数，以生成用于绘制矩形的堆叠条对象

var barChartObject = d3.stack().keys(originalData.header.slice(1) )
                                  .value( (d,key) => d[key] )
                                  (originalData.rows);

结果对象如下所示：

var originalData = {
            
header: ["label", "count", "missing"],
rows:   [
            {label: "A", count: 0, missing: 0},
            {label: "B", count: 24, missing: 59},
            {label: "C", count: 6, missing: 77},
            {label: "D", count: 7, missing: 76},
            {label: "E", count: 2, missing: 81},
            {label: "F", count: 7, missing: 76},    
            {label: "G", count: 0, missing: 83}
        ]
};

[
    [[0,0],[0,24],[0,6],[0,7],[0,2],[0,7],[0,0]]
    [[0,0],[24,83],[6,83],[7,83],[2,83],[7,83],[0,83]]
]

onBarClick = (event, data) => {

    ...    
}

var barGroupTag = this.svg.selectAll()
                       .data(barChartObject)
                       .enter()
                       .append("g")

barGroupTag.selectAll("rect")
        .data(d => d)
        .enter()
        .append("rect")
        ...
        .on("mouseover", this.onMouseOverBar)
        .on("mouseout", this.onMouseOutBar)
        .on('click', this.onBarClick);

注意：每个“pair”实际上都是一个对象，其中包含用于构建pair的原始数据，这些数据在

.data

字段中可用

绘制矩形的代码如下所示：

var originalData = {
            
header: ["label", "count", "missing"],
rows:   [
            {label: "A", count: 0, missing: 0},
            {label: "B", count: 24, missing: 59},
            {label: "C", count: 6, missing: 77},
            {label: "D", count: 7, missing: 76},
            {label: "E", count: 2, missing: 81},
            {label: "F", count: 7, missing: 76},    
            {label: "G", count: 0, missing: 83}
        ]
};

[
    [[0,0],[0,24],[0,6],[0,7],[0,2],[0,7],[0,0]]
    [[0,0],[24,83],[6,83],[7,83],[2,83],[7,83],[0,83]]
]

onBarClick = (event, data) => {

    ...    
}

var barGroupTag = this.svg.selectAll()
                       .data(barChartObject)
                       .enter()
                       .append("g")

barGroupTag.selectAll("rect")
        .data(d => d)
        .enter()
        .append("rect")
        ...
        .on("mouseover", this.onMouseOverBar)
        .on("mouseout", this.onMouseOutBar)
        .on('click', this.onBarClick);

然后使用

标记手动包装矩形，以允许自定义属性存储

 barGroupTag.selectAll("rect")
            .each( function () {
                       
                       var rectNode = this;
             
                       d3.select(rectNode.parentNode)
                         .insert("g")
                         .append( () => rectNode); 
                   }
                 ); 

问题是我需要访问与每个条关联的原始数据，但不幸的是，在回调中，第二个参数返回整个堆栈，而不是单个对。因此，我不知道被点击的数组的元素是什么。我检查了传递给回调的第三个参数，但事实并非如此。例如，如果我单击[0,24]元素（第二个堆栈的底部栏），在回调中，我得到

event

作为

pointereevent

对象，而

data

是一个对象数组：

[[0,0],[0,24],[0,6],[0,7],[0,2],[0,7],[0,0]]

我可以使用

.data

字段访问原始数据，例如

数据[index].data.label

或

数据[index].data.count

，但问题是我不知道索引的值

这很奇怪，因为如果我将一个属性添加到带有.attr的矩形中，将接收单个对象（

d

value），而不是整个数组，因此我可以执行以下操作：

.attr("xxx", d => {return d.data.count > 0 ? "aaa" : "bbb" } )

---

那么，为什么传递给回调的值是整个条数组，而不是与单击的条关联的单个元素呢？如何获取与单击的条关联的原始数据？

问题是由语句

barGroupTag引起的。selectAll（“rect”）。每个（…）

，其中我手动将每个

rect

包装为

g

标记。由于未知原因，此操作也正在更改与每个rect关联的数据。删除该代码后，onclick回调报告了正确的pair数据对象

---

因此，请小心使用

selectAll（“xxx”）。每个（…）

语句，尤其是当您修改DOM对象的结构或层次结构，并且在这些对象上定义了事件回调时。

您使用的是d3 v6，对吗？当我转到并将

.on（“click”，console.log）

添加到条中时，我看到各个值被记录下来。在左下角的条形图中，我看到了

[05038433]

。是的，版本是

6.2.0

，

d3 collection

的版本是

1.0.7

。我在Observable上的另一个样本上注意到了同样的行为。样品工作正常，但不是我的。关于您链接的示例，我发现在使用

d3.stack

函数的方式上有些不同。在使用

d3.stack

的输出时，选择也略有不同。我将尝试进行一些更改。我忘了提到

节点是用

标记手动包装的（请参阅更新的代码）。这就是问题所在。此操作正在更改与

rect

关联的数据。删除该代码后，onclick回调报告了正确的对值。很好，现在就解决了？如果这解决了你的问题，我建议你要么写一个自我回答，或者，更可取的是，完全删除这篇文章，因为对我们其他人来说，这篇文章没有什么可借鉴的。