Javascript D3.js-JSON中的堆叠条形图？

我一直在尝试重现这把小提琴：

在我使用数据构建的水平堆叠条形图的上下文中

变量bar1Data=[{ 职位:1,， 标签：“70k”， 价值：1708026 }, { 职位：2， 标签：“71K-149K”， 价值：1915059 }, ]; //根据值对栏进行排序 bar1Data=bar1Data.SORTFUNCTION A，b{ 返回d3上升A位置，b位置； } 变量颜色=['绿色'，'蓝色']； var bars=d3。选择“bars” .append'svg' .attr'width'，800 .attr'height'，200； bars.选择All'rect' .databar1Data 进来 .append'rect' .attr'width'，函数d{ 返回d； } .attr'x'，函数d，i{ 返回sumbar1Data.value，0，i； } .attr'fill'，函数d，i{ 返回颜色[i]； } .attr'y'，0 .attr'height'，100； 函数数组，开始，结束{ var合计=0； 对于变量i=start；i 现在，从您的数据中，我似乎了解到您希望使用前面所有条目的值来计算截至该点的累积总和。我将在答案中实现这一点，但也希望向您指出stack=d3.stack，它为您提供了这一功能

还要注意，您的值太大。你需要使用一个域来转换它们，否则你会得到每美元或其他货币单位的一个像素，这意味着这些条形图的右边是显示器宽度的100倍

变量bar1Data=[{ 职位:1,， 标签：“70k”， 价值：50 }, { 职位：2， 标签：“71K-149K”， 价值：40 }, ]; //根据值对栏进行排序 bar1Data=bar1Data.SORTFUNCTION A，b{ 返回d3上升A位置，b位置； } 变量颜色=['绿色'，'蓝色']； var bars=d3。选择“bars” .append'svg' .attr'width'，800 .attr'height'，200； bars.选择All'rect' .databar1Data 进来 .append'rect' .attr'width'，函数d{ 返回d值； } .attr'x'，函数d，i{ //请注意，我在这里使用“.map”只接受“.value”属性 //从数据中创建一个数字数组。 返回sumbar1Data.mape=>e.value，0，i； } .attr'fill'，函数d，i{ 返回颜色[i]； } .attr'y'，0 .attr'height'，100； 函数数组，开始，结束{ var合计=0； 对于变量i=start；iHHPro.json的数据是什么？好像重估了bar1Data错误嘿，这就是我打电话的数据。我没有将其放在这里，而是更改了数组中的值以匹配JSON的值：