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

Question

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

documentation

数据位于CSV文件的两列中。我已经修改了Mike Bostock的代码，并设法创建了一个符合我想要的情节，但只有当我手动指定两个单独的密度图时 - 请参阅此{{ 3}}，特别是从第66行开始：

map()

我尝试了color的各种咒语，试图将数据放入一个对象中，该对象可用于根据var columns = color.domain().map(function(column) { return { column: column, values: data.map(function(d) { return {kde: kde(d[column])}; }) }; }); 域设置每个密度区域的颜色，例如：

map()

我不太了解{{1}}的作用，但这绝对不起作用。

如何构建我的数据以使这种情节不那么脆弱？

Answer 1

要使这种通用和删除列依赖关系首先准备好数据：

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));
})

所以现在代码将不依赖于列名及其泛型。

工作代码here