D3.js画3D方柱

D3.js入门实例-3D方柱

最近由于项目需要去实现3D可视化，所以学了一下D3.js。使用版本是v4.x。

前言

我们先定义下要引用的参数

let param = {
    data: [
        {
            xName: '1月'，
            value: '0.01'
        },
        {
            xName: '2月'，
            value: '0.1'
        },
        {
            xName: '3月'，
            value: '1000'
        },
        {
            xName: '4月'，
            value: '7'
        },
        {
            xName: '5月'，
            value: '22'
        },
        {
            xName: '6月'，
            value: '90'
        },
        {
            xName: '7月'，
            value: '700'
        }
    ],
    padding: { // svg内部padding
        top: 20,
        bottom: 20,
        left: 20,
        right: 20
    },
    svgHeight: 500, // svg高度
    svgWdith: 500, // svg宽度
    id: '#js-svg' // svg标签
}

比例尺

我们画一个柱状图，y轴的数据大小如上，最大值和最小值之间间隔由差不多1000，我们不可能在y轴坐标上显示0到1000都显示出来,这时候我们需要一个映射关系，由某个区域的值去映射到另一个区域，但是它们之间的关系不变。

在这里，我主要介绍两个常用比例尺，线性比例尺和序数比例尺。

这个实例中，我们X轴用的是序数比例尺，Y轴用的是线性比例尺。

线性比例尺（Y轴）

定义一个Y轴比例尺函数

let drawYscale () {}

在函数里定义一个线性比例尺

d3.scaleLinear()

接下来我们要规定其定义域 domain(arr)

d3.scaleLinear().domain(param.data.map((d) => {
    return d.value
}))

注意：这里domain(arr)接受一个数值数组，数组需要包含两个及两个以上值，而且如果不是数值会被强制转换成数值类型。多个值会形成分段比例尺。

然后我们规定值域 range([range])

d3.scaleLinear().domain(param.data.map((d) => {
    return d.value
})).range([svgHeight - padding.top - padding.bottom, 0])

range和domain一样，接受一个数组，和domain不一样的是数组不一定是要数值类型。