d3.js——多柱体柱状图（v5）

一、页面引用

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>柱状图</title>
</head>
<body><div id="container-single"></div><div id="container-more"></div><div id="container-stack-up"></div><script src="../lib/d3-5.9.7.min.js"></script><script src="../js/histogram.js"></script>
</body>
</html>

二、多柱体柱状图绘制

//多柱体柱状图
function moreHistogram() {let svgAttr = {width:1000,height:500};let marge = {top:60,bottom:60,left:60,right:60};let sales_volume_watermelon = [10,13,15,18,22,37,40,35,27,18,16,15];let sales_volume_orange = [20,35,18,16,13,12,9,11,19,27,30,26];let monthes = ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'];let svg = d3.select('#container-more').append('svg').style('width', svgAttr.width).style('height', svgAttr.height);let g = svg.append('g').attr('transform', 'translate('+marge.top+','+marge.left+')');//X轴比例尺let xScale = d3.scaleBand().domain(monthes).rangeRound([0, svgAttr.width-marge.left-marge.right]);let xAxis = d3.axisBottom(xScale);//Y轴比例尺let yScale = d3.scaleLinear().domain([0, d3.max(sales_volume_watermelon)]).range([svgAttr.height-marge.top-marge.bottom, 0]);let yAxis = d3.axisLeft(yScale);g.append('g').attr('transform', 'translate('+0+','+(svgAttr.height-marge.bottom-marge.top)+')').call(xAxis).selectAll('text').attr('transform', 'rotate(45 -20 20)');g.append('g').attr('transform', 'translate(0,0)').call(yAxis).selectAll('line').attr('stroke-width', '0.5px').attr('x1', 0).attr('x2', function () {return svgAttr.width-marge.left-marge.right;});let fruitType = g.append('g').attr('transform', 'translate(0,-50)');fruitType.append('rect').attr('width', '20px').attr('height', '20px').attr('fill', '#2C81F3');fruitType.append('rect').attr('transform', 'translate(100, 0)').attr('width', '20px').attr('height', '20px').attr('fill', '#DEC56C');fruitType.append('text').attr('transform', 'translate(25, 15)').text('西瓜');fruitType.append('text').attr('transform', 'translate(125, 15)').text('橘子');//西瓜柱体let rectWidth = 30;let wRect = g.selectAll('.rect').data(sales_volume_watermelon).enter().append('g');wRect.append('rect').attr('x', function (d, i) {return xScale(monthes[i]) + 8;}).attr('y', function (d, i) {let min = yScale.domain()[0];return yScale(min);}).attr('width', function () {return rectWidth;}).attr('height', function () {return 0;}).attr('fill', '#22A7F2').attr('cursor', 'pointer').on('mouseover', function (d, i) {d3.select(this).transition().duration(100).attr('fill', '#2C81F3');}).on('mouseout', function (d, i) {d3.select(this).transition().duration(100).attr('fill', '#22A7F2');}).on('click', function () {alert('西瓜事件已触发！');}).transition().duration(1000).delay(function(d,i){return i*100;})//.ease(d3.easeBack).attr("y",function(d){return yScale(d);}).attr("height",function(d){return svgAttr.height-marge.top-marge.bottom-yScale(d);});//橘子柱体let oRect = g.selectAll('.rect').data(sales_volume_orange).enter().append('g');oRect.append('rect').attr('x', function (d, i) {return xScale(monthes[i]) + rectWidth + 8;}).attr('y', function (d, i) {let min = yScale.domain()[0];return yScale(min);}).attr('width', function () {return rectWidth;}).attr('height', function () {return 0;}).attr('fill', '#DEC56C').attr('cursor', 'pointer').on('mouseover', function (d, i) {d3.select(this).transition().duration(100).attr('fill', '#CB7730');}).on('mouseout', function (d, i) {d3.select(this).transition().duration(100).attr('fill', '#DEC56C');}).on('click', function () {alert('橘子事件已触发！');}).transition().duration(1000).delay(function(d,i){return i*100;})//.ease(d3.easeBack).attr("y",function(d){return yScale(d);}).attr("height",function(d){return svgAttr.height-marge.top-marge.bottom-yScale(d);});//西瓜柱体顶部绘制文字wRect.append('text').attr('x', function (d, i) {return xScale(monthes[i])+rectWidth/2;}).attr('y', function () {let min = yScale.domain()[0];return yScale(min);}).attr('font-size', '12px').attr('fill', '#404040').text(function (d) {return d;}).transition().duration(1000).delay(function (d, i) {return i*100;})//.ease(d3.easeBack).attr('x', function (d, i) {return xScale(monthes[i])+rectWidth/2;}).attr('y', function (d) {return yScale(d)-1;});//橘子柱体顶部绘制文字oRect.append('text').attr('x', function (d, i) {return xScale(monthes[i])+rectWidth*1.5;}).attr('y', function () {let min = yScale.domain()[0];return yScale(min);}).attr('font-size', '12px').attr('fill', '#404040').text(function (d) {return d;}).transition().duration(1000).delay(function (d, i) {return i*100;})//.ease(d3.easeBack).attr('x', function (d, i) {return xScale(monthes[i])+rectWidth*1.5;}).attr('y', function (d) {return yScale(d)-1;});
}window.onload = function () {moreHistogram();
}

d3.js——多柱体柱状图（v5）相关推荐

D3.js 绘制立体柱状图
绘制效果图如下: 绘制思路: 将立体柱状图拆分为顶部与侧面,并分别用 path 路径绘制. 拆分后的顶部和侧边的绘制顺序如图所示: // 基础配置const svgObj = { // svg画布大小 ...
d3.js 教程模仿echarts柱状图
由于最近工作不是很忙,隧由把之前的charts项目用d3.js重写的一下,其实d3.js文档很多,但是入门不是很难,可是想真的能做一个完成的,交互良好的图还是要下一番功夫的.今天在echarts找到了 ...
d3.js画柱状图超详细教程
d3.js画柱状图超详细教程完整代码下载链接:https://download.csdn.net/download/qq5q13638/85248934,直接用这个文件夹内打开即可. 下面是完整教程 ...
D3.js 教程: 使用 JavaScript 创建可交互的柱状图
原文链接:D3.js Tutorial: Building Interactive Bar Charts with JavaScript 译者:OFED 最近,我们有幸参与了一个机器学习项目,该项目涉 ...
d3.js多个x轴y轴canvas柱状图
d3.js多个x轴y轴canvas柱状图最终效果图镇楼: 本文通过三个步骤来介绍d3.js. 1.简单的柱状图: 2.多个x轴的柱状图: 3.多个x轴.y轴的柱状图: 学习心得: d3.js入门相对 ...
D3.js实现带动画效果的柱状图
先上效果图,如下图所示: <!DOCTYPE html> <html lang="zh-cn"><head><meta charset=& ...
D3.js的v5版本入门教程（第一章）—— 如何在项目中使用D3.js
D3.js的v5版本入门教程(第一章) 1.需要的一些工具这个其实随便!最简单的就是建一个.txt文件就可以敲起代码来!作者本人用的是myeclipse(主要需要安装tomcat),因为写的是前端, ...
D3.js的v5版本入门教程（第六章）——做一个简单的图表
D3.js的v5版本入门教程(第六章) 从这一章开始,进入正式的d3,js绘图阶段,有了前面几章基本知识的积累,这样看接下来的绘图代码才不会觉得比较辛苦做一个简单的图表为了做一个简单的图表,我们还 ...
D3.js的v5版本入门教程（第十四章）—— 力导向图
D3.js的v5版本入门教程(第十四章) 这一章我们来绘制一个力导向图,什么叫力导向图,通俗一点将就是有节点和线组成,当鼠标拖拽一个节点时,其他节点都会受到影响(力导向图有多种类型,本章绘制的效果就是 ...

d3.js——多柱体柱状图（v5）

d3.js——多柱体柱状图（v5）相关推荐

最新文章

热门文章