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]
});

Working Plunkr解决方案在https://plnkr.co/edit/sUy564JZfAoKDb24U5VA?p=preview

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

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

Answer 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();

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

希望它有所帮助。

退出（）不适用于d3组条形图

1 个答案: