手机版

D3.js(V3) react实现带坐标和比例尺的柱形图(V3版)

时间:2021-08-24 来源:互联网 编辑:宝哥软件园 浏览:

现在用D3.js react做一个带坐标轴和比例尺的柱形图。我已经尽力标注了所有的代码,最后我会呈现完整的条形图代码。如果有疑问,可以看看我之前介绍的方法。介绍了以下方法。

还有,数据都是自定义的假数据,请参考制作方法。

首先,定义柱形图的数据、绘图区域的宽度和高度以及:的上下左右边距

var宽度=600;//SVG绘图区域的宽度var高度=500;//SVG绘图区域的高度//定义数据vardatalist=[50,43,120,87,99,167,142]//定义上下左右边距varpadding={top336020,right336020,bottom3360100,left:100}。

var SVG=D3 . select(' # body ')//select div . append(' SVG '),其id为body//add avg。attr('width ',width) //设置svg的width属性。attr('height ',height) //设置SVG的height属性,定义比例尺:

//定义比例尺//x轴宽度var xAxisWidth=300//y轴宽度var yAxisWidth=300//x-scale(序数音阶)var xScale=d3.scale .序数()//构建序数音阶。domain(D3 . range(datalist . length))//设置域。rangerundbits ([0,xaxis width],0.2)//设置值范围而不是范围(),并舍入结果//y轴刻度(线性刻度)var yScale=d3.scale.linear() //创建线性刻度。域([0,d3.max(dataList)]) //设置域。范围([0,亚西)

//添加矩形SVG。selectall ('rect ')。数据(datalist)//绑定数据。enter() //获取enter部分。追加(' rect') //添加rect元素,使其与绑定数组的长度一致。attr('fill ',Fuchsia') //设置颜色。attr('x ',函数(d,i){ //设置矩形返回填充的x坐标。leftxscale (I)})。attr ('y '),函数(d){ //设置矩形返回高度-填充的y坐标。底部y刻度(d)})。attr ('width ',xscale。range band())//设置矩形的宽度。attr('height ',函数(d){ //设置矩形返回y刻度的高度(d

//添加标签文本SVG。选择全部(“文本”)。数据(datalist)//绑定数据。enter() //获取enter部分。追加(' text') //添加text元素,使其与绑定数组的长度一致。attr('填充',白色')//字体颜色。attr('font-size ',' 14px') //font size。attr('text-anchor ',' middle') //文本相对于基点的位置。attr('x ',函数(d,I){ //设置文本返回padding.leftxscale (I)})的x坐标。attr ('y ',函数(d){//设置文本返回高度的y坐标-padding.bottom-yscale (d)})。attr ('dx ',xscale . range band()/2)//x方向相对于当前位置的平移距离。attr('dy ',' 2em ')//y方向相对于当前位置的平移距离。text(函数(d){ //文本内容返回d})最终定义坐标轴3360

//定义坐标轴//x轴var xAxis=d3.svg.axis() //创建新的默认坐标轴。比例尺(xScale) //设置坐标轴的比例尺。定向('底部')//设置坐标轴方向//重置Y轴刻度的取值范围。与原来的yScale.range([yAxisWidth,0])相反//y轴var yAxis=d3.svg.axis() //创建一个新的默认坐标轴。比例(yScale) //设置坐标轴的比例。定向('左')//设置坐标轴方向//添加x轴并平移svg.append('g') //添加g元素。attr('class ',' axis') //定义类名。attr ('transform ',' translate ('padding。left ',(height-padding.bottom) ')') //翻译xAxis。调用(xAxis) //将自身作为参数传递给xAxis函数//添加y轴并翻译svg.append('g') //添加g元素。包含svg中坐标轴所有元素的attr('class ')。Axis') //定义类名。attr ('transform ',' translate ('padding。左','(高度-填充。bottom-yAxis width)')')//平移y轴。call(yAxis) //将自身作为参数传递给yAxis函数。让我们看看效果。

完整代码:

从“反应”导入反应{组件};从“d3”导入*作为D3;//引入D3类bar扩展组件{构造器(道具){super(道具)};这个。state={ } } componentdemont(){//调用此。one method()} one method(){ var width=600;//SVG绘图区域的宽度var高度=500;//SVG绘图区域的高度//定义数据vardatalist=[50,43,120,87,99,167,142]//定义上下左右边距varpadding={top336020,right336020,bottom3360100,left :100 } var SVG=D3 . select(' # body ')//选择div.append ('svg '),id为body//add avg。attr('width ',width) //设置width属性。SVG//的attr('高度',高度)设置SVG //y轴宽度var yAxisWidth=300//x-scale(序数音阶)var xScale=d3.scale .序数()//构建序数音阶。domain(D3 . range(datalist . length))//设置域。rangerundbits ([0,xaxis width],0.2)//设置值范围而不是范围(),并舍入结果//y轴刻度(线性刻度)var yScale=d3.scale.linear() //创建线性刻度。域([0,d3.max(dataList)]) //设置域。范围([0,YAxisWidth]) //设置值范围//添加矩形SVG。selectall ('rect ')。数据(datalist)//绑定数据。enter() //获取输入部分。追加(' rect') //添加rect元素,使其与绑定数组的长度一致。attr('fill ',Fuchsia') //设置颜色。attr('x ',函数(d,i){ //设置矩形返回填充的x坐标。leftxscale (I)})。attr ('y '),函数(d){ //设置矩形返回高度-填充的y坐标。底部y刻度(d)})。attr ('width ',xscale。range band())//设置矩形的宽度。attr('height '),函数(d){ //设置矩形返回的高度yScale(d) }) //添加标签文本SVG。全选('文本')。数据(datalist)//绑定数据。enter() //获取enter部分。追加(' text') //添加文本元素。使其与绑定数组的长度一致。attr('填充','白色')//字体颜色。attr('font-size ',' 14px') //font size。attr('text-anchor ',' middle') //文本相对于基点的位置。attr ('x) I){ //设置文本返回填充的x坐标. leftxscale (I)})。attr ('y ',函数(d){//设置文本返回高度的y坐标-padding.bottom-yscale (d)})。attr ('dx ',xscale . range band()/2)//x方向相对于当前位置的平移距离。attr('dy ',2em ')//y方向相对于当前位置的平移距离。text(函数(d){ //文本内容返回d }) //定义坐标轴//x轴var xAxis=d3.svg.axis() //新建默认坐标轴。比例尺(xScale) //设置坐标轴的比例尺。orient('bottom') //设置坐标轴方向//重置y轴刻度的取值范围,与原来的yScale.range相反([yAxisWidth,0]) //y轴var yAxis=d3.svg.axis() //新建默认坐标轴。比例(yScale) //设置坐标轴的比例。定向('左')//设置坐标轴方向//添加x轴并平移svg.append('g') //添加g元素。attr('class ',' axis') //定义类名。attr ('transform ',' translate ('padding。left ',(height-padding.bottom) ')') //翻译xAxis。调用(xAxis) //将自身作为参数传递给xAxis函数//添加y轴并翻译svg.append('g') //添加g元素。包含svg中坐标轴所有元素的attr('class ')。Axis') //定义类名。attr ('transform ',' translate ('padding。左','(高度-填充。bottom-yAxis width)')')//平移y轴。call(yAxis) //将自身作为参数传递给yAxis函数} render } }导出默认Bar摘要

以上是边肖介绍的D3.js(v3) react实现的带坐标和比例尺的柱形图(V3版)。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持!如果你觉得这篇文章对你有帮助,请转载,请注明出处,谢谢!

版权声明:D3.js(V3) react实现带坐标和比例尺的柱形图(V3版)是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。