数据驱动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"))
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。