D3数据与数据的区别是什么？
D3数据与数据的区别是什么？
提问于 2012-12-06 00:57:26
有人能解释一下D3.js中datum()和data()的区别吗？我看到两者都被使用了，我不确定为什么你要选择一个而不是另一个？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-12-06 03:33:09
我从Mike本人那里找到了正确的答案：
D3 - how to deal with JSON data structures?
如果要将数据绑定到单个SVG元素，请使用
(...).data([data])或
(...).datum(data)如果要将数据绑定到多个SVG元素
(...).data(data).enter().append("svg").
Stack Overflow用户
发布于 2018-08-21 18:18:19
我认为HamsterHuey给出的解释是到目前为止最好的。为了对其进行扩展并提供差异的可视化表示，我创建了一个示例文档，该文档至少说明了data和datum之间的部分差异。
下面的答案更多的是从使用这些方法中得出的观点，但如果我错了，我很高兴被纠正。
此示例可以在下面运行，也可以在in this Fiddle下运行。
const data = [1,2,3,4,5];
const el = d3.select('#root');
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node => data: ${d}`);
const join= el
.selectAll('div.b')
.data(data);
join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)我认为datum更容易掌握，因为它不做连接，但当然这也意味着它有不同的用例。
对我来说，一个很大的区别-尽管还有更多-是data只是在d3图表上进行(实时)更新的自然方式，因为一旦获得它，整个进入/更新/退出模式就会使它变得简单。
另一方面，在我看来，datum更适合静态表示。例如，在下面的示例中，我可以实现与在原始数组上循环并按索引访问数据相同的结果，如下所示：
data.map((n, i) => {
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node-${n} => data: ${d[i]}`);
});在这里试试：https://jsfiddle.net/gleezer/e4m6j2d8/6/
同样，我认为这更容易掌握，因为你可以从进入/更新/退出模式中解脱出来，但是一旦你需要更新或更改选择，你肯定会更好地求助于.data()。
const data = [1,2,3,4,5];
const el = d3.select('#root');
el
.append('div')
.classed('a', true)
.datum(data)
.text(d => `node => data: ${d}`);
const join= el
.selectAll('div.b')
.data(data);
join
.enter()
.append('div')
.classed('b', true)
.text((d, i) => `node-${i + 1} => data: ${d}`)/* Ignore all the css */
html {
font-family: arial;
}
.l {
width: 20px;
height: 20px;
display: inline-block;
vertical-align: middle;
margin: 10px 0;
}
.l-a {
background: #cf58e4;
}
.l-b {
background: #42e4e4;
}
.a {
border-bottom: 2px solid #cf58e4;
}
.b {
border-bottom: 2px solid #42e4e4;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
<div style="margin-bottom: 20px;">
<span class="l l-a"></span> .datum() <br />
<span class="l l-b"></span> .data()
</div>
<div id="root"></div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/13728402
复制相关文章
相似问题