D3, Conceptually

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}`);

D3, Conceptually

select/selectAll/append/enter

推荐阅读更多精彩内容