Javascript d3.js v5中直方图的正态分布(Bell)曲线
我在d3.jsv5中制作了一个直方图,我需要帮助为它添加一条正态分布曲线。下面是一段代码片段。完整的最小可复制示例代码(如下文所述)Javascript d3.js v5中直方图的正态分布(Bell)曲线,javascript,d3.js,Javascript,D3.js,我在d3.jsv5中制作了一个直方图,我需要帮助为它添加一条正态分布曲线。下面是一段代码片段。完整的最小可复制示例代码(如下文所述) const data = [ {"sizeBand": "0-45", "units": 56659}, {"sizeBand": "46-65", "units": 137201}, {"sizeBand": &
const data = [
{"sizeBand": "0-45", "units": 56659},
{"sizeBand": "46-65", "units": 137201},
{"sizeBand": "66-85", "units": 201630},
{"sizeBand": "85+", "units": 21939}
]
const y = d3.scaleLinear()
.domain([0, d3.max(data, d => d.units)])
.range([graphHeight, 0]);
const x = d3.scaleBand()
.domain(data.map(item => item.sizeBand))
.range([0, graphWidth])
.paddingInner(0.2)
.paddingOuter(0.2);
const xAxis = d3.axisBottom(x)
const yAxis = d3.axisLeft(y)
xAxisGroup.call(xAxis)
yAxisGroup.call(yAxis)
rect1.data(data)
.enter().append('rect')
.attr('width', x.bandwidth)
.attr('height', (d, i) => graphHeight - y(d.units))
.attr('x', (d, i) => x(d.sizeBand))
.attr('y', d => y(d.units))
下面是完整的工作示例。
下面是我正在寻找的一个示例图像
我尝试过复制和解构其他例子,但没有成功。关键是它要在D3.JS v5中工作,并且需要使用上面链接的JS提琴中的工具提示
非常感谢您的帮助