D3, Conceptually

select/selectAll/append/enter

// html
  
First
Second
// js d3.select('.section').text('D3 was here');

则界面显示:

D3 was here
Second
  • d3.select返回一个Selection对象. 里面包含_groups(分组的信息)和_parents(父节点).


    D3, Conceptually_第1张图片
    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
  
ok
// js d3.select('.section').append('div').styles({ display: 'inline-block', color: 'green' }) .text('\u2713')
  • 存在数据情况下, 使用data函数来驱动
// html
  
// js const slayerNames = ['Buffy', 'Kendra', 'Faith']; d3.selectAll('.slayer').data(slayerNames).text((d, i) => `Slayer #${i + 1}:${d}`);

但是数据如果比DOM元素多, 怎么办?

  • 使用enter函数来新建DOM(数据存在, 但是DOM元素不存在的情况, 使用enter)
// html
// 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)