0

我已经在这个小提琴中将我的问题编译成一个最小的工作示例：

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选择相关的数据，而不是路径选择，这是我所期望的。

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

4

2 回答 2

4

您看到此行为是因为具有将原始选择（即）中的数据绑定到您正在制作的子选择（即）.select()的副作用——如文档中所述。也就是说，通过运行此代码，您将更改绑定到所选元素的数据，即使您的调用没有参数。svg.line.data()

将此与 进行对比.selectAll()，后者没有此副作用，并且确实会选择具有您之前绑定到它们的数据的元素。

于 2013-10-18T19:21:46.603 回答
2

将您的警报更改为：

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

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

于 2013-10-18T19:22:37.220 回答