three little circle

<svg style={{ width: 720, height: 120 }}>
  <circle cx="40" cy="60" r="10"></circle>
  <circle cx="80" cy="60" r="10"></circle>
  <circle cx="120" cy="60" r="10"></circle>
</svg>

1.png

选择元素

• 使用selectAll/select来选择元素.
• 可以使用style/attr来设置元素属性.

const circle = d3.selectAll('circle');
circle.style('fill', 'steelblue').attr('r', 30)
  .attr('cx', () => Math.random() * 720);

绑定数据

• 使用data方法来绑定数据.
• 绑定数据后, 每个属性的方法第一个参数对应数据的元素, 第二个参数对应索引.

const data = [32, 57, 112];
const circle = d3.selectAll('circle');
circle.data(data).style('fill', 'steelblue').attr('r', (d, i) => i + Math.sqrt(d));

2.PNG

新建元素

• 使用enter属性来新建元素.

const svg = d3.select("svg");
svg.selectAll("circle").data([32, 57, 112, 293])
  .enter().append("circle")
  .attrs({ cx: (d, i) => i * 100 + 30, cy: 60, r: d => Math.sqrt(d)});

• circle最早是没有的, 但是我们可以先selectAll, 然后enter后append("circle"), 这样circle就动态生成了.

• 安装d3-selection-multi, 就可以使用attrs属性.

  
  3.PNG

删除元素

• 使用exit来保留提供数据的元素. 如果执行remove, 则删除没提供数据的剩余元素.

const svg = d3.select("svg");
svg.selectAll("circle").data([32, 57, 112, 293])
  .enter().append("circle")
  .attrs({ cx: (d, i) => i * 100 + 30, cy: 60, r: d => Math.sqrt(d)});

svg.selectAll("circle").data([32, 57])
  .exit().remove();

• 这样32, 57对应的元素就保留下来, 112, 293对应的元素则被删除.