Javascript 使用整数列表绘制密度图

我以这个例子为基础：

但是，我不想从CSV文件加载数据，而是想使用整数列表构建密度图。像这样：

const list = [0, 0, 4, 19, 42, 75, 117, 165, 209, 238, 255, 255, 241, 220, 199, 181, 168, 162, 160, 159, 158, 156, 155, 151, 147, 142, 139, 135, 129, 123, 117, 111, 103, 96, 92, 86, 81, 78, 74, 70, 65, 61, 56, 50, 46, 42, 39, 36, 34, 32, 30, 28, 27, 25, 23, 21, 20, 19, 18, 17, 16, 15, 14, 14, 13, 12, 11, 11, 10, 9, 9, 8, 8, 8, 7, 7, 7, 6, 6, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 3, 3, 3, 3, 3, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 5, 5, 6, 7, 8];

我该怎么做？

//设置图形的尺寸和边距
var margin={顶部：30，右侧：30，底部：30，左侧：50}，
宽度=460-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
/*你的名单*/
常数列表=[94.0,145.0,251.0,218.0,265.0,98.0,66.0,80.0,52.0,63.0,92.0,80.0,228.0,91.0,58.0,91.0,101.0，]
//添加x轴
var x=d3.scaleLinear（）
.domain（[0，1000]）
.范围（[0，宽度]）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
变量y=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0,0.02]）；
svg.append（“g”）
.调用（d3.左（y））；
//计算核密度估计
var kde=核密度估计器（kernelEpanechnikov（7），x.ticks（40））
变量密度=kde（列表）
//绘制该区域
追加（“路径”）
.attr（“类”、“我的路径”）
.基准面（密度）
.attr（“填充”，“#69b3a2”）
.attr（“不透明度”，“.8”）
.attr（“笔划”，“千”）
.attr（“笔划宽度”，1）
.attr（“笔划线条连接”、“圆形”）
.attr（“d”，d3.line（）
.曲线（d3.曲线基）
.x（函数（d）{返回x（d[0]）；}）
.y（函数（d）{返回y（d[1]）；}）
);
//函数来计算密度
函数核密度估计器（核，X）{
返回函数（V）{
返回X.map（函数（X）{
return[x，d3.mean（V，函数（V）{返回核（x-V）；}]；
});
};
}
函数kernelEpanechnikov（k）{
返回函数（v）{
返回Math.abs（v/=k）作为对的补充，您链接的原始代码使用
d3.line（）
创建带有绿色填充的路径。这不是一种聪明的方法，因为填充可以在任何地方。例如，数组的外观如下所示：



//设置图形的尺寸和边距
var margin={顶部：30，右侧：30，底部：30，左侧：50}，
宽度=460-margin.left-margin.right，
高度=400-margin.top-margin.bottom；
//将svg对象附加到页面主体
var svg=d3。选择（“我的数据维”）
.append（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度+边距。顶部+边距。底部）
.附加（“g”）
.attr（“转换”，
“翻译（“+margin.left+”，“+margin.top+”）；
/*你的名单*/
常量列表=[0,0,4,19,42,75,117,165,209,238,255,255,241,220,199，
181, 168, 162, 160, 159, 158, 156, 155, 151, 147, 142, 139, 135, 129,
123, 117, 111, 103, 96, 92, 86, 81, 78, 74, 70, 65, 61, 56, 50, 46,
42, 39, 36, 34, 32, 30, 28, 27, 25, 23, 21, 20, 19, 18, 17, 16, 15,
14, 14, 13, 12, 11, 11, 10, 9, 9, 8, 8, 8, 7, 7, 7, 6, 6, 5, 5, 5, 5,
5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4,
4, 4, 3, 3, 3, 3, 3, 2, 3, 3, 3, 3, 3, 3, 3, 3, 4, 5, 5, 6, 7, 8];
//添加x轴
var x=d3.scaleLinear（）
.domain（[0，1000]）
.范围（[0，宽度]）；
svg.append（“g”）
.attr（“变换”、“平移（0）”、“高度+”）
.call（d3.axisBottom（x））；
//添加y轴
变量y=d3.scaleLinear（）
.范围（[高度，0]）
.domain（[0,0.03]）；
svg.append（“g”）
.调用（d3.左（y））；
//计算核密度估计
var kde=核密度估计器（kernelEpanechnikov（7），x.ticks（40））
变量密度=kde（列表）
//绘制该区域
追加（“路径”）
.attr（“类”、“我的路径”）
.基准面（密度）
.attr（“填充”，“#69b3a2”）
.attr（“不透明度”，“.8”）
.attr（“笔划”，“千”）
.attr（“笔划宽度”，1）
.attr（“笔划线条连接”、“圆形”）
.attr（“d”，d3.line（）
.曲线（d3.曲线基）
.x（函数（d）{返回x（d[0]）；}）
.y（函数（d）{返回y（d[1]）；}）
);
//函数来计算密度
函数核密度估计器（核，X）{
返回函数（V）{
返回X.map（函数（X）{
return[x，d3.mean（V，函数（V）{返回核（x-V）；}]；
});
};
}
函数kernelEpanechnikov（k）{
返回函数（v）{
return Math.abs（v/=k）请详细说明-您的问题是什么？到目前为止您尝试了什么？