Javascript d3.js v5中直方图的正态分布(Bell)曲线

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": &

我在d3.jsv5中制作了一个直方图,我需要帮助为它添加一条正态分布曲线。下面是一段代码片段。完整的最小可复制示例代码(如下文所述)

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提琴中的工具提示

非常感谢您的帮助