根据 D3.js API 入门 画一个简单的柱状图
- 创建图表 【 d3-selection 】
let chart = d3.select( ".chart" );
计算x,y轴 【d3-scale 】
x轴 使用 分段比例尺 【 d3.scaleBand 】 x
y轴 使用 线性比例尺 【 d3.scaleLinear 】 y为图表创建两个子元素 【 标题， 正图 】
let title = chart.append('g')// 输出标题
.attr('class', 'title')
.append('text')
.attr('x', containerWidth / 2)
.attr('y', 20)
.text('aaa');
let g = chart.append("g"); // 正图
- 创建tootip 【 d3Tip 】
let tip = d3Tip() // 设置tip
.attr('class', 'd3-tip')
.html(function (d) {
return "xxxx";
});
chart.call(tip);
- 为正图 添加元素 【 x、y轴，柱状体，每列的值 】
g.append("g") // 设置x轴
.attr("transform", "translate(0, 10)")
.call(d3.axisBottom(x));
g.append("g")// 设置y轴
.call(d3.axisLeft(y).ticks(10, 'ms')) // 分成10份，给出单位
.append("text")
.attr("y", -16)
.text("y轴标题");
g.selectAll(".bar") // 所有柱体
.data(data)
.enter() // 当不存在该dom时 自动根据data创建
.append("rect")
.on('mouseover', tip.show) // 使用第4步创建好的tooltip 绑定事件
.on('mouseout', tip.hide)
.attr("fill", "#8a2be2") // 柱体 填充颜色
.attr("x", function (d) { return x(d.x); }) // 取出data 中每个x 所对应的 x轴起始值
.attr("y", height) // 柱体在y轴方向的起始值
.attr("width", x.bandwidth()) // 取出x轴的每段宽度 （分段比例尺）
.attr("height", 0) // 初始化柱体的高度为0
.attr("y", function (d) { return y(d.y); }) // 取出data中每个y所对应的 y轴起始值
.attr("height", function (d) { return height - y(d.y); }); // 计算柱体高度
g.append('g') // 图上的值
.selectAll('text')
.data(data)
.enter()
.append('text')
.attr('text-anchor', 'middle')
.attr('x', function (d, i) { return x(d.x); })
.attr('y', function (d) { return y(d.y); })
.attr('dx', barWidth / 2)
.text(function (d) { return (d.y * 100).toFixed(2) + 'ms'; })
.on('mouseover', tip.show)
.on('mouseout', tip.hide);
源码 暂未上传
