Question

http://jsfiddle.net/brunoperel/z6qfttmr/

我正在尝试动态创建元素，具体取决于点击的链接：

d3.select('#processes').selectAll('.processLaunch').data(helperProcessesData).enter()
    .append('a')
        .classed('processLaunch', true)
        .attr('href', 'javascript:void(0)')
        .text(function(d) { return d.text; })
        .on('click', function(d) {
            var currentProcess=d.name;
            var filteredData = helperStepsData.filter(function(d) { return d.process === currentProcess; });

            var helperStepsForProcess = d3.select('div#helperContainer').selectAll('.helperStep')
                .data(filteredData);
            console.log('Filtered data : '+JSON.stringify(filteredData));
            console.log('Linked data : '+JSON.stringify(helperStepsForProcess.data()));
            helperStepsForProcess.enter()
                .append('div').text(function(d) { return 'Step '+d.step+' : '+d.title; });
            helperStepsForProcess.exit().remove();
    });

这里有（至少！）两件我不明白的事情：

每次点击链接时，相关文本都会添加到页面中，但即使我在选择中调用了.exit().remove()，也不会删除过时的文本。为什么？
当我执行将要绑定到选择元素的console.log数据时，它会返回一个对象数组，这很好。但是，在此之后的行中，我检索已绑定到元素的数据，我得到一个undefined个对象的数组。为什么我也不能获得一系列对象？

Answer 1

我想你只是忘了在步骤中添加相应的类：

helperStepsForProcess.enter()
            .append('div')
            .attr('class', 'helperStep');

helperStepsForProcess.text(function(d) { 
   return 'Step '+d.step+' : '+d.title; });

在你的小提琴中添加它会返回预期的结果。

我希望这有帮助！

更新：https://jsfiddle.net/chroth/z6qfttmr/2/

exit（）。remove（）不会删除过时的元素

1 个答案: