D3：在 bin 中合并两个数据集 - 直方图布局

Question

在 D3 中：

我使用“age”列创建了具有多列数组“age”和“gender”的直方图。我的直方图仅由“年龄”数据制成。但我希望能够将相应的“性别”数据存储在直方图的箱中或箱中。这样，当我将鼠标悬停在那个 bin 上时，我可以计算一些关于处理 bin 的“性别”数据的东西——而且，这个 bin（和整个直方图）是建立在“年龄”数据的基础上的。

样本数据：

    {
    "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);

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

.data()

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

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

--- 更新----

我知道有必要将整个数据集绑定到 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) 来绑定您的所有数据，而不仅仅是年龄。这将使数据可用于最后与.on 绑定的回调。那你为什么要传入allAge？好吧，因为这就是你从histogram 函数中得到的。 docs 声明

返回值是一个数组数组：外部数组中的每个元素代表一个 bin，每个 bin 包含来自输​​入值的关联元素。

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

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

希望对您有所帮助。让我知道我是否完全偏离了基础（因为我没有为你编写代码）。