javascript - Exit() 不适用于 d3 组条形图

Question

我创建了一个带有 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”数据。对于点击图例我已经处理了数据的修改(意味着从数据集中删除或添加特定周的数据。

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

Answer 1

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

function updateChart() {

    ...

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

   ...
}

您必须定义一种方法使每个元素都独一无二，以便轻松找到它们。您必须指定一个键，d3 selections 将使用它来了解元素是新的/已经存在的/从当前选择中删除的。 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

希望对您有所帮助。