基于React Hooks的D3.js数据可视化实践系列（1）

开门见山

D3.js，众所周知，是一个JavaScript库，主要是将数据处理成各式各样的图表或文档。同时，结合HTML、CSS、SVG实现复杂的数据可视化需求。且开发自由度较高，提供了可视化组件和数据驱动的DOM操作方法。

小试牛刀

这节我们先用d3来画一个折线图，奏乐：

import React, { useEffect } from 'react';
import * as d3 from 'd3';

function ExampleOne() {
  const data = [20, 30, 50, 60, 30];
  const attribute = {
    w: 600,
    h: 400,
  }

  useEffect(() => {
    const svg = d3.select('#example1')
    .attr('width', attribute.w)
    .attr('height', attribute.h)
	// enter的时候将数据搂进来，其实这里还有一个update()和exit()
    svg.selectAll('rect')
      .data(data)
      .enter()
      .append('rect')
      .attr('x', (d, i) => i * 70)
      .attr('y', (d) => attribute.h - (3 * d))
      .attr('width', 65)
      .attr('height', (d) => d * 20)
      .attr('fill', 'pink');
      
    svg.append('text')
    .text('加个水印')
    .attr('x', -360)
    .attr('y', 60)
    .attr('fill', '#000')
    .attr('transform', 'rotate(-35 240 -400)')
    .attr('fill-opacity', '0.3')
    .attr('font-size', 50);
      
  }, [attribute, data]);

  return (
    <svg id="example1"></svg>
  )
}

export default ExampleOne;

然后我们会得到这么一张带水印的图，想要什么自己调整咯

是不是有点写JQuery的感觉？

总结

同样是数据驱动，那有人可能会问，它的数据驱动和react的数据驱动同时用上了，那不是多此一举吗？这个问题，我们放到之后系列解答。

这篇文章呢，只是前菜，主菜将在之后系列揭晓，欢迎交流讨论。