使用d3.js实现直方图的最简单的实例代码

首先，把效果图放出来：
柱状图的基本要素：柱状图、坐标轴、比例尺、数值等。

不得不说d3.js比ECharts，直接使用比较麻烦，但它更多的是自由。

让我们看看怎么做。
确定画布的大小
var宽度= 400；
var高度= 400；
在正文中添加SVG画布
VaR SVG = d3.select（体）
追加（SVG）
attr（宽。
attr（高度。
定义画布周围空白区域
左：30，右：30，顶部：20，底部：20 }；
定义数组
var数据集{ 10, 20, 30，40, 30, 20，10, 5 }；
坐标轴的刻度
VaR XScale = d3.scale.ordinal（）
。域（d3.range（数据长度））
。rangeroundbands（{ 0，宽度padding.left -填充。右}）；
坐标轴的刻度
VaR yscale = d3.scale.linear（）
。域（{ 0，d3.max（数据集）））
范围（{高度padding.top - padding.bottom，0 }）；
x轴
var x = d3.svg.axis（）
规模（XScale）。
东方（底部）；
坐标轴
var = d3.svg.axis（Y轴）
规模（yscale）。
东方（左）；
在矩形空白之间
无功rectpadding = 4；
添加矩形元素
VaR矩形= svg.selectall（。myrect ）
数据（数据集）
输入（）
。追加（矩形）
attr（班。
attr（填。
attr（变换。
attr（X。
返回XScale（I）+ rectpadding / 2；
}）
attr（Y。
返回yscale（D）；
}）
attr（宽。
attr（高度。
回报高padding.top - padding.bottom - yscale（D）；
}）；
添加文本元素
var文本= svg.selectall（。mytext ）
数据（数据集）
输入（）
追加（文本）
attr（班。
attr（填。
.attr（锚文本
attr（变换。
attr（X。
返回XScale（I）+ rectpadding / 2；
}）
attr（Y。
返回yscale（D）；
}）
attr（DX。
返回（xscale.rangeband（）- rectpadding） / 2；
}）
attr（颐。
返回20；
}）
文本（函数（d）{）
返回D；
}）；
添加x轴
Svg.append（G）
attr（班。
。attr（变换），翻译（+ padding.left +
电话（X轴）；
添加y轴
Svg.append（G）
attr（班。
attr（变换。
电话（Y轴）；
总结

好吧，最简单的条形图使用d3.js的例子是什么Is it easy希望本文的内容可以帮助那些刚学的朋友d3.js。如果你有任何问题，可以留言交流。谢谢您一直鼓励我。