Exit() 不适用于 d3 组条形图答案

【问题标题】：Exit() is not working for d3 group bar chartExit() 不适用于 d3 组条形图
【发布时间】：2016-09-22 01:27:07
【问题描述】：

我创建了一个带有 json 数据的组条形图。单击图例我想在图表中显示和隐藏组中的特定条形图（使用 d3 的进入和退出功能）。

我的json数据是这样的

var values = [{
    "timeId": "201501040100",
    "value": 2454721,
    "week": 1
}, {
    "timeId": "201501040100",
    "value": 4017731,
    "week": 2
}, {
    "timeId": "201501040100",
    "value": 6656528,
    "week": 3
}, {
    "timeId": "201501040100",
    "value": 7472223,
    "week": 4
}, {
    "timeId": "201501040200",
    "value": 2454721,
    "week": 1
}, {
    "timeId": "201501040200",
    "value": 3017731,
    "week": 2
}, {
    "timeId": "201501040200",
    "value": 5017731,
    "week": 3
}, {
    "timeId": "201501040200",
    "value": 7472223,
    "week": 4
}, ];

我已经根据 timeId 对这些数据进行了分组

weeksVolume = _.groupBy(values, 'timeId');
weeksVolume = Object.keys(weeksVolume).map(function(key) {
    return weeksVolume[key]
});

工作 Plunkr 解决方案在这里https://plnkr.co/edit/sUy564JZfAoKDb24U5VA?p=preview

现在点击我想隐藏的第一个图例，并从每次点击中显示“周：1”数据。对于点击图例，我已经处理了数据的修改（意味着从数据集中删除或添加特定周数据。

使用更新的数据集，我尝试重新绘制图表，但它无法正常工作。每次它都会从最后一个索引中删除和添加数据。

【问题讨论】：

标签： javascript angularjs d3.js

【解决方案1】：

您的问题出在您的updateChart 函数中：

function updateChart() {

    ...

    volumeBars = week.selectAll("rect")
        .data(function(d, i) {
            return d;
        });  // <= Here is the problem

   ...
}

您必须定义一种方法来使每个元素都独一无二，以便轻松找到它们。您必须为键赋予属性，d3 选择将使用它来了解元素是否是新的/已经存在/从当前选择中删除。 data 函数的第二个参数使得：

volumeBars = week.selectAll("rect")
    .data(function(d, i) {
        return d;
    },
    function(d){return d.timeId + d.week;});
    //Here you can define the key you want

您可以在此处找到data 函数的文档：https://github.com/d3/d3/wiki/Selections#data

此外，您不必在调用exit 之前创建另一个选择。之前已经创建了选择，与您调用 enter 的相同。所以你可以写：

volumeBars.exit().text(function(d) {console.log(d);}).remove();

这里是更新插件：https://plnkr.co/edit/inrD7aC3KYmv8iU2gnkA?p=preview

希望对你有帮助。

【讨论】：