Question

我已将此问题编译为此fiddle的最小工作示例：

HTML：

<div id='test'></div>

JS：

var data = d3.range(10);
var svg = d3.select('#test').datum('hello').append('svg');
var path = svg.append('g')
  .append('path')
    .data([data])
    .attr('class','line');

alert(svg.select('.line').data());

此代码提醒hello，这是与div选择相关联的数据，不路径选择，这是我所期望的。

为什么我会看到这种行为？

Answer 1

您发现此行为是因为.select()具有将原始选择中的数据（即svg）绑定到您正在制作的子选区的副作用（即{{{{}} 1}}） - 详见documentation。也就是说，通过运行此代码，即使您对.line的调用没有参数，您也会更改绑定到所选元素的数据。

将此与.data()进行对比， not 具有此副作用，并且确实会选择包含您之前绑定到的数据的元素。

Answer 2

将您的提醒更改为：

alert(svg.selectAll('.line').data());

select和selectAll之间存在微妙但重要的区别，前者将父级的数据应用于select'ed孩子。实际上，这里并不明显，但是通过在该警告语句中使用select，您最终会消除先前在其上设置的范围数据。请参阅此jsFiddle中的评论以了解问题：http://jsfiddle.net/5wZnL/7/。

d3.js在不同选择之间混合数据

2 个答案: