根据我对enterD3中函数的理解,运行此代码后div的内容:
<body>
<div>
<p class="x"></p>
</div>
<script>
d3.select('div')
.selectAll('p')
.data([3, 4])
/**
* if I uncomment this it works
* but I don't want to call the
* same function twice
*/
// .text(d => d + '')
.enter()
.append('p')
.text(d => d + '');
</script>
</body>
应该:
<div>
<p class="x">3</p>
<p>4</p>
</div>
但我得到了
<div>
<p class="x"></p>
<p>4</p>
</div>
1)我错过了什么？根据我的理解,3应该在输入功能之后应用于第一个p和4后一个.
2)另外我还没有得到exit().remove()的东西,从我的理解它应该删除附加p但它不是那么它有什么好处？
当你这样做:
d3.select('div')
.selectAll('p')
您正在选择<p>所选div中的所有元素.你只有一个div(无关紧要,因为它select选择了它得到的第一个......)并且只有一个 <p>元素.
然后,绑定数据:
.data([3, 4])
因此,到目前为止,我们有:
现在,关于"输入"选择的重要部分是:您的选择中已经有一个<p>元素.该<p>元素获得第一个数据,3.剩余的数据附加到新创建的p元素,即4.
您的"输入"选择包含没有相应元素的所有数据点.如您所见,由于您在选择中有1个元素和2个数据点,因此"输入"选择只有1个元素.让我们展示一下(看看控制台):
var enterSelection = d3.select('div')
.selectAll('p')
.data([3, 4])
.enter()
.append('p')
.text(d=>d);
console.log("Elements in the enter selection: " + enterSelection.nodes().length)<script src="https://d3js.org/d3.v4.min.js"></script>
<div>
<p class="x"></p>
</div>简而言之,您必须将选择与数据进行比较:如果您拥有的数据多于元素,则额外数据将绑定到属于"输入"选择的元素.如果元素多于数据,则没有相应数据的额外元素属于"退出"选择.在您的情况下,"退出"选择为空.
最后,如果要更新现有 <p>元素的文本,则必须使用"更新"选项:
var p = d3.select('div')
.selectAll('p')
.data([3, 4]);
p.enter()
.append('p')
.merge(p)
.text(d => d);<script src="https://d3js.org/d3.v4.min.js"></script>
<div>
<p class="x"></p>
</div>