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

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）你正在做（即.line） - 作为documentation详细说明。也就是说，通过运行此代码，即使您对.data()的呼叫没有参数，也要更改绑定到所选元素的数据。

将此与.selectAll()对比，不是有这种副作用，并且确实会选择带有之前绑定到它们的数据的元素。

Answer 2

您的警报更改为：

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

有select和selectAll，其中前者的母公司数据适用于select“ED孩子之间的微妙但重要的区别。事实上，这里并不明显，但通过在该警报语句中使用select，您最终将清除之前在其上设置的范围数据。请参阅此jsFiddle中的评论以了解问题：http://jsfiddle.net/5wZnL/7/。