d3.js实现创建完整柱形图的案例

　　介绍

这篇文章主要介绍了d3.js实现创建完整柱形图的案例,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

d3js.org v5.9.2

之前只是各个部分的演示,现在将各部分整合起来,发现还是学到了不少东西

主要是加深了对规模(比例尺)的理解

代码

样式及数据

先是样式

& lt; style> 　　矩形{ 　　填充:粉红色 　　｝ 　　文本{ 　　字体大小:10 px; 　　｝ 　　& lt;/style>

接着是数据及柱状图宽高等

const 　　data=https://www.yisu.com/zixun/(3、6、10、25), 　　barWidth=100, 　　barHeight=300, 　　填充={//svg留白用 　　上图:100年, 　　对的:100年, 　　底部:100, 　　左:100 　　};

创建比例尺

实践之后对比例尺与坐标轴的理解加深了一点

让barScale=d3.scaleLinear ()。域([0,d3.max(数据)])。范围([0,barHeight]), 　　yAxisScale=d3.scaleLinear () .domain ([d3.max(数据),0])。范围([0,barHeight]),//y轴使用线性比例尺,注意域输入域 　　xAxisScale=d3.scaleBand ()。域([1、2、3、4])。范围([0,(barWidth - 1) * data.length]);//x轴使用scaleBand比例尺

barScale用于柱形图创建,
yAxisScale用于y轴创建,注意域()的输入域,否则刻度数值大小排列会相反,
xAxisScale用于x轴创建,使用scaleBand序数比例尺,
之前对比例尺的理解太过肤浅,这里也做了几个小实验

console.log (“barScale (0):”+ barScale (0)); 　　console.log (“yAxisScale (0): ' + yAxisScale (0)); 　　console.log (“xAxisScale (2): ' + xAxisScale (2)),

显示如下

d3。js实现创建完整柱形图的案例

对于<代码> barScale 与<代码> yAxisScale>

创建柱状图

让barContainer=d3.select (& # 39; .chart& # 39;) 　　.attr(& # 39;宽度# 39;,数据。* barWidth +填充长度。左+ padding.right) 　　.attr(& # 39;高度# 39;,barHeight +填充。前+ padding.bottom) 　　.selectAll(& # 39;舌鳎# 39;) 　　. data(数据).enter () .append(& # 39;舌鳎# 39;) 　　.attr(& # 39;变换# 39;,(d i)=比;{ 　　返回& # 39;翻译(& # 39;+(填充。左+ i * barWidth) + & # 39;, & # 39;+(填充。前+ barHeight - barScale (d)) + & # 39;) & # 39; 　　}）; 　　barContainer.append(& # 39;矩形# 39;) 　　.attr(& # 39;高度# 39;,d=比;barScale (d)) 　　.attr(& # 39;宽度# 39;,barWidth - 1); 　　barContainer 　　.append(& # 39;文本# 39;) 　　。text (d=比;d) 　　.attr (& # 39; y # 39; (10) 　　.attr (& # 39; x # 39;, barWidth/2 - 5),

这里使用了之前定义的填充对象的值进行部分留白

创建坐标轴

/* * 　　*创造y轴 　　*/让桠溪=d3.axisLeft (yAxisScale); 　　d3.select (& # 39; .chart& # 39;) 　　.append(& # 39;舌鳎# 39;) 　　.attr(& # 39;变换# 39;,& # 39;翻译(& # 39;+(填充。左- 10)+ & # 39;& # 39;+填充。前+ & # 39;)& # 39; 　　打电话给(桠溪);/* * 　　*创建X轴 　　*/让xAxis=d3.axisBottom (xAxisScale); 　　d3.select (& # 39; .chart& # 39;) 　　.append(& # 39;舌鳎# 39;) 　　.attr(& # 39;变换# 39;,& # 39;翻译(& # 39;+ (padding.left) + & # 39; & # 39;+(填充。前+ barHeight) + & # 39;) & # 39; 　　打电话给(xAxis);

最后创建坐标轴

d3。js实现创建完整柱形图的案例

感谢你能够认真阅读完这篇文章,希望小编分享d3.js实现创建完整柱形图的案例内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!

d3.js实现创建完整柱形图的案例