javascript - D3 : incorporate two datasets in bin - histogram layout

Question

在 D3 中:

我使用“年龄”列创建了包含多列数组“年龄”和“性别”的直方图。我的直方图是用“年龄”数据制作的。但我还希望能够将相应的“性别”数据存储在直方图的容器中或存储在容器中。这样，当我将鼠标悬停在某个容器上时，我就可以计算出有关处理该容器的“性别”数据的一些信息——而且，该容器(以及整个直方图)再次建立在“年龄”数据的基础上。

示例数据:

    {
    "age":[22,21,30,26,28,26,23,32,30,26,34,23,33,23,34,28,34,35,31,15,26,34,32,21,35,28,27,26,24,19,21,32,23,23,23,23,28,32,22,26,32,21,25,30,23,30,21,20,28,28,26,26,31,39,25,30,36,23,38,30,30,31,23,22,28,26,23,32,26,34,28,30,24,27,26,38,24,30,34,25,28,35,22,27,26,25,29,32,26,30,33,33,31,31,37,28,27,28,29,16],
    "gender":["1","0","0","0","1","1","1","1","1","1","0","1","0","0","1","0","0","0","1","1","1","1","0","0","1","0","1","0","0","1","0","0","1","0","0","1","1","0","1","1","0","1","0","0","1","1","0","0","1","0","1","1","1","0","1","1","1","0","1","1","0","1","0","1","1","1","1","1","0","1","1","0","1","0","1","1","1","1","0","0","1","0","1","1","0","0","1","1","0","1","1","1","0","1","1","0","0","1","1","0"]
}

这是一些代码。我认为这就是与此问题直接对应的所有内容，但如果需要更多内容，请告诉我:

var histogram = d3.layout.histogram()
    .frequency(false)
    .bins(x.ticks(10));

var canvas = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("100sample.json", function(error, data) {
    //var allData = histogram(allAge.age);
    var allAge = histogram(data.age);

var allBars = canvas.selectAll(".allBar")
        .data(allAge)
        .enter().insert("rect", ".axis")
            .attr("class", "allBar")
            .attr("x", function(d) { return x(d.x) + 1; })
            .attr("y", function(d) { return y(d.y); })
            .attr("width", x(allAge[0].dx + allAge[0].x) - x(allAge[0].x) - 1)
            .attr("height", function(d) { return height - y(d.y); })
            .on('mouseover', allTip.show)
            .on('mouseout', allTip.hide);

我有一切使用“鼠标悬停”和构建直方图等的方法。每个年龄值都有相应的性别值，但性别值不会改变箱子/直方图。我在想将性别值(value)观添加到

.data()

但不知何故没有在直方图布局上调用它们？

如何合并与用于直方图的数据相对应的额外数据？

---更新----

我知道有必要将整个数据集绑定(bind)到 svg/canvas allBars 变量，这样我就可以访问 allAge 以获取直方图，并访问性别以获取我尝试在鼠标悬停时计算的元数据。

我有:

var total = [allAge, data.gender]; 

从 data.age 创建 allAge 直方图之后。这可能不是一次引入所有数据的最佳方式...

现在，而不是:

.data(allAge)

我有:

.data(total)

因此我需要在直方图构造上索引 total[0] 并在与鼠标悬停关联的元数据上索引 total[1]。如何在 allbars var 中进行索引 - 特别是在 .attr 中构建直方图？

Answer 1

你真的很接近!

你想要的是调用 .data(data) 来绑定(bind)你所有的数据，而不仅仅是年龄。这将使数据可用于最后与 .on 绑定(bind)的回调。那么为什么要传递 allAge？好吧，因为这就是您从 histogram 函数返回的结果。 docs声明

The return value is an array of arrays: each element in the outer array represents a bin, and each bin contains the associated elements from the input values.

很好 - 这样您就不会通过直方图函数运行数据而丢失数据。但是在一个对象中有两个数组不会混淆吗？那就是 accessor 的地方函数进来了。将它链接到您定义 histogram 的位置。您可能会使用 function(d){return d.age} 进行回调，或者您可能需要使用长度为 2 的数组并按索引进行。你也可以试试 zipping你的数组。

我不认为您需要修改您的 .attr 调用，因为它们对 bin 进行操作，而不是对其中的数据进行操作。我还建议再看看你是如何设置宽度的——同样，你将不得不摆弄它，但也许 function(d){return x(d.dx) -1} 会起作用更好的。直接访问其中的数据有点危险，即使 dx 应该相同。

希望对您有所帮助。让我知道我是否完全偏离基地(因为我没有为您编写代码)。