数据驱动d3.js库与Vandf.js库联合创建条形图

数据驱动d3.js库与Vandf.js库联合创建条形图

​ Vanddf是数据驱动的开源开发框架，它的诞生最早的初衷，是为了降低d3.js使用的复杂度。我们一起看看如何与d3.js一起工作，参照D3.js值得学习吗？ - 知乎 (zhihu.com)文末的例子做一个条形图。vandf的说明文档见vandf - npm (npmjs.com)

1.先创建一个组件

import { Van } from "vandf";
class Bar extends Van {
    constructor(id){
        super(id)

        this.tag('svg').view(BarView)
        this.kid('rect').tag('rect').view(RectView)
    }
}

2.创建组件视图模型

class BarView {
    create (node, _, _, config) {
        node.attr("width", config.svgWidth)       //设定宽度
            .attr("height", config.svgHeight);    //设定高度
    }
}

class RectView {
    //渲染组件，model为用户数据模型
    render (node, model) {
        node.attr('width', d => model.width(d))
            .attr('height', d => model.height(d))
            .attr('x', (_,i) => model.x(i) )
            .attr('y', d => model.y(d))
            .attr('fill', model.color())
    }
}

​ 数据模型实质上是实现数据到视图映射的能力，从上述代码可以看出model将数据映射为视图的高度、宽度、位置和颜色等。

3.定义用户数据模型

class RectModel {
    constructor(_, config){
        this._config = config;
        //定义y轴的线性比例尺
        this._yScale = d3.scaleLinear()        
    }

    supply(d){
        let data = d.data;
        this._data = data;
        let c = this._config;
        this._yScale.domain([0, d3.max(data)])
            .range([0, c.svgHeight]);   //返回一个线性比例尺，是一个函数
        return data;
    }

    height(d){
        console.log(d, this._yScale(d))
        return this._yScale(d)
    }

    width (datum) {
        let c = this._config;
        return c.barWidth;
    }

    x(index) {
        let c = this._config;
        return index * ( c.barWidth +  c.gap )
    }

    y(datum) {
        let c = this._config;
        return c.svgHeight - this._yScale(datum)
    }

    color(index) {
        let c = this._config;
        return c.barColor;
    }
}

4.定义用户视图模型

class RectView {
    create(node) {
        node.attr('style','cursor:pointer')
            .on('click', e => {//注册点击事件
                console.log(node.datum)
            },true)//这里的click事件为原生事件,传入true参数
    }
}

5.准备数据和配置参数

//定义SVG元素的高度、宽度，柱子的宽度，柱子之间的间隔（柱子的高度由数据决定）
const config = {
    svgWidth:500,
    svgHeight:300,
    barWidth: 30, 
    gap: 10,
    barColor:'gold'
}
const data = [20,10,20,50,30,60,35];    //数据

6.使用组件

//导入组件库，根据组件文件具体目录调整。
import Bar from "../comp/bar"

let app = Van.new('app')

let bar = Bar.new('box', app.id)
    .supply({data})
    .config(config)

//通过组件名称选择bar组件的子组件rect
bar.select('rect')
    .model(RectModel)
    .view(RectView)

app.attach(document.querySelector("#app"))

例子的原代码在vandfexample - npm (npmjs.com)