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

现在用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版)。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！