select/selectAll/append/enter
// html
<div className="section">First</div>
<div className="section">Second</div>
// js
d3.select('.section').text('D3 was here');
则界面显示:
D3 was here
Second
-
d3.select返回一个Selection对象. 里面包含_groups(分组的信息)和_parents(父节点).
3.PNG - d3.select默认会选中第一个匹配的元素. 而d3.selectAll会匹配所有的元素.
假设有N个div, 我们想偶数行显示Even, 奇数行显示Odd, 则可以这样编写:
d3.selectAll('.section').text((d, i) => i % 2 === 0 ? 'Even' : 'Odd')
这里d实际上为undefined, 因为并没有data函数.
- 使用append动态创建DOM元素(没有使用data情况下)
// html
<div className="section">ok</div>
// js
d3.select('.section').append('div').styles({ display: 'inline-block', color: 'green' })
.text('\u2713')
- 存在数据情况下, 使用data函数来驱动
// html
<div className="slayer"></div>
<div className="slayer"></div>
<div className="slayer"></div>
// js
const slayerNames = ['Buffy', 'Kendra', 'Faith'];
d3.selectAll('.slayer').data(slayerNames).text((d, i) => `Slayer #${i + 1}:${d}`);
但是数据如果比DOM元素多, 怎么办?
- 使用enter函数来新建DOM(数据存在, 但是DOM元素不存在的情况, 使用enter)
// html
<div className="viz" style={{ height: 900, width: 900 }}>
<div className="slayer"></div>
<div className="slayer"></div>
</div>
// js
const slayerNames = ['Buffy', 'Kendra', 'Faith'];
d3.selectAll('.slayer').data(slayerNames)
.text((d, i) => `Slayer #${i + 1}:${d}`);
d3.select('.viz').selectAll('.slayer').data(slayerNames)
.enter().append('div')
.style('color', 'green')
.attr('class', 'slayer')
.text((d, i) => `Slayer #${i + 1}:${d}`);
