一个d3.js图表中的多核密度估计

我想画一个图，同时显示两种不同分布的密度估计，如下所示：

var color = d3.scale.category10()
        .domain(d3.keys(newData))//this will return the columns
        .range(["#a6cee3", "#b2df8a"]);

d3.keys(newData).forEach(function(d){
    svg.append("path")
            .datum(kde(newData[d]))
            .attr("class", "area")
            .attr("d", area)
            .style("fill", color(d));
})

数据位于CSV文件的两列中。我修改了Mike Bostock的代码，并成功地绘制了一个符合我要求的图，但前提是我手动指定了两个单独的密度图——请参见以下内容，特别是从第66行开始：

svg.append("path")
    .datum(kde(cola))
    .attr("class", "area")
    .attr("d", area)
    .style("fill", "#a6cee3");

svg.append("path")
    .datum(kde(colb))
    .attr("class", "area")
    .attr("d", area)
    .style("fill", "#b2df8a");

我用

map（）

尝试了各种咒语，试图将数据放入单个对象中，该对象可用于根据

color

域设置每个密度区域的颜色，例如：

var columns = color.domain().map(function(column) {
    return {
        column: column,
        values: data.map(function(d) {
            return {kde: kde(d[column])};
        })
    };
});

我不太了解

map（）

的功能，但这肯定不起作用

---

如何构造数据以使此绘图不那么脆弱？

要使此绘图通用并删除列相关性，请首先准备数据：

var newData = {};
// Columns should be numeric
data.forEach(function(d) {
    //iterate over all the keys
    d3.keys(d).forEach(function(col){
        if (!newData[col])
            newData[col] = [];//create an array if not present.
        newData[col].push(+d[col])
    });
});

现在

newData

将这样保存数据

{ 
  a:[123, 23, 45 ...], 
  b: [34,567, 45, ...]
}

接下来，使颜色域如下所示：

var color = d3.scale.category10()
        .domain(d3.keys(newData))//this will return the columns
        .range(["#a6cee3", "#b2df8a"]);

d3.keys(newData).forEach(function(d){
    svg.append("path")
            .datum(kde(newData[d]))
            .attr("class", "area")
            .attr("d", area)
            .style("fill", color(d));
})

最后，制作如下面积图：

var color = d3.scale.category10()
        .domain(d3.keys(newData))//this will return the columns
        .range(["#a6cee3", "#b2df8a"]);

d3.keys(newData).forEach(function(d){
    svg.append("path")
            .datum(kde(newData[d]))
            .attr("class", "area")
            .attr("d", area)
            .style("fill", color(d));
})

因此，现在代码将不再依赖于列名及其泛型

工作代码