D3.js + React.js 实现柱状图

D3.js + React.js实现数据可视化系列
本篇文章代码源于https://github.com/CBDxin/chart
这是一个基于D3.js + React.js实现数据可视化库，目前已实现了柱状图、饼图、区域图、折线图、气泡图等多个图形，还带有炫酷的动画效果，实用的数据区域筛选功能。目前仍处于开发阶段，请大家多多关注。

假如我们现在有这样的一组数据：

let dataSet = [
{x: "一月", y: 600},
{x: "二月", y: 600},
{x: "三月", y: 900},
{x: "四月", y: 1500},
{x: "五月", y: 300},
{x: "六月", y: 700},
{x: "七月", y: 200},
]

想要用柱状图去进行可视化，那我们该怎么做？

首先，我们先看看柱状图长啥样：

柱状图.png

我们可以简单的把他看成是由一堆四边形组成的，那么，单个四边形怎么画出来呢，我们可以使用svg中的rect元素实现

<svg width="100%" height="100%" >
<rect width="300" height="100"
  fill="rgb(0,0,255)"
  stroke="rgb(0,0,0)"/>
</svg>

效果图：

四边形.png

其中，rect 元素的 width 和 height 属性可定义矩形的高度和宽度，fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）， stroke 属性定义矩形边框的颜色。

所以我们只需要计算出组成柱状图的各个rect元素的以上属性就可以了。

首先我们需要布置一个高为500，宽为800的svg元素作为我们的画板：

render() {
    return <svg width={800} height={500}></svg>;
}

我们先把dataSet做下处理，得到值域与作用域

//我们先把dataSet做下处理，得到值域与作用域
let domian = [], range = []
dataSet.map(item=>{
  domian.push(item.x);
  range.push(item.y)
})

接下来我们需要用到D3.js的比例尺模块 D3.js中常用的比例尺介绍去将值域和定义域的值映射到画板的高和宽中

createScale = () => {


    let xScale = d3.scaleBand(domain, [0,800]);//将定义域映射到画板的宽度
    let yScale = d3.scaleLinear([0, Math.max(...range) * 1.2],[500, 0]);//将值域映射到画板的高度

    return {
        xScale,
        yScale,
    };
};

利用scale计算rect元素的各个属性：

createRects = () => {

        let bandWidth = xScale.bandwidth();
        let width = bandWidth * 0.3;
                let {xScale, yScale} = this.createScale();

        return dataSet.map((item, index) => {
            return (
            //通过比例尺将x y转化为画板中的坐标及高度
                <rect
                    key={index}
                    x={xScale(item.x) - width / 2}
                    y={yScale(item.y)}
                    height={500 - yScale(item.y)}
                    width={width}
                ></rect>
            );
        });
    };

最后再把各个四边形渲染出来就大功告成了

render() {
    return <svg width={800} height={500}>{this.createRects()}</svg>;
}