退出（）不适用于d3组条形图 [英] Exit() is not working for d3 group bar chart

问题描述

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

I have created a group bar chart with json data.on click on legend I want to show and hide particular bar from group in chart (using enter and exit functionality of d3).

我的json数据是这样的

My json data is like this

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对这些数据进行了分组

I have grouped this data based on timeId

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

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

Working Plunkr solution is here https://plnkr.co/edit/sUy564JZfAoKDb24U5VA?p=preview

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

now click on first legend I want to hide and show "week : 1" data from each click.for that on click on legend I have handle the modification of data(means removing or adding of particular week data from dataset.

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

With the updated dataset I tried to reDraw the chart but it is not working properly.every time it is removing and adding data from last index.

推荐答案

您的问题出在 updateChart 函数中：

function updateChart() {

    ...

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

   ...
}

你好我们可以定义一种方法，使每个元素都独一无二，以便轻松找到它们。您必须归一个键，并且d3选择将使用它来知道元素是否是新的/已经存在/从当前选择中移除。 data 函数的第二个参数使得：

You have to define a way to make unique each element, in order to find them easily. You have to attribute a key, and d3 selections will use it to know if a element is new / already present / removed from the current selection. The 2nd argument of data function makes that:

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

你可以找到<的文档code> data 此处的功能： https：// github .com / d3 / d3 / wiki /选择＃数据

You can find the documentation for data function here: https://github.com/d3/d3/wiki/Selections#data

此外，您不必在退出致电。之前已经创建了选择，与您调用的内容相同，请输入。所以你可以写：

In addition, you don't have to create another selection before your exit call. Selection is already created before, the same on which you called your enter. So you can just write:

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

此处更新plunker： https://plnkr.co/edit/inrD7aC3KYmv8iU2gnkA?p=preview

Here the update plunker: https://plnkr.co/edit/inrD7aC3KYmv8iU2gnkA?p=preview

希望有所帮助。

这篇关于退出（）不适用于d3组条形图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！