D3：納入斌兩個數據集 - 直方圖佈局

Question

在D3：

我創建直方圖具有多列排列，「年齡」和「性別」，使用「年齡」一欄。我的直方圖只用「年齡」數據。但是我希望能夠在柱狀圖中存儲或存儲相應的「性別」數據。這樣，當我將鼠標移動到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 /帆布allBars變量，這樣我可以爲直方圖和性別對我試圖元數據訪問allAge在mouseover上計算。

我：

var total = [allAge, data.gender]; 

創建從data.age的allAge直方圖之後。這可能不是在一次所有數據帶來的最好方式......

現在，而不是：

.data(allAge) 

我：

.data(total) 

所以我需要指標總數[ 0]的直方圖結構和總數[1]的元數據將與鼠標懸停相關聯。如何在allbars var內建立索引 - 特別是在.attr內建立直方圖？

Answer 1

你真的很接近！

你想要的是調用.data(data)綁定所有的數據，而不僅僅是年齡。這將使數據可用於最後與.on綁定的回調。那麼爲什麼你通過allAge？那麼，因爲這就是你從histogram函數中得到的結果。該docs狀態

返回值是數組的數組：外陣列中的每個元素表示一個倉，並且每個區間包含從輸入值相關聯的元素。

好 - 所以你不會通過直方圖函數運行它而丟失數據。但是不會因爲在一個對象中有兩個數組而感到困惑嗎？這就是accessor函數的作用。將它鏈接到您定義的位置histogram。回調函數可能會跳出function(d){return d.age}，或者您可能需要使用數組長度2並按索引進行。您也可以嘗試zipping您的陣列。

我不認爲你需要修改你的.attr調用，因爲他們在倉上操作，而不是他們內部的數據。我還建議再看看你如何設置寬度 - 再一次，你將不得不擺弄它，但也許function(d){return x(d.dx) -1}會更好地工作。即使dx應該是相同的，直接訪問這些數據也會有點紅旗。

希望有幫助。讓我知道，如果我完全脫離基地（因爲我沒有爲你寫代碼）。