具有數組的對象的D3條形圖

Question

下午好。

我將此D3條形圖示例與我的數據一起使用（與jsfiddle示例中的格式相同）。

圖表運行良好，但我有一些我不知道要解決的問題。

1. xAxis具有關鍵參數的索引號，而不是關鍵參數值的索引號；
2. 當我按下“排序”按鈕后對數據進行排序時；
3. 排序后的小節上方的數字消失或顯示在對應小節上方的左側

var dataset = {key: [0, 30], value:[60, 30]};

http://jsfiddle.net/3HL4a/75/

這是您可以查看代碼並執行更改的鏈接。

謝謝

Answer 1

要引用鍵值，您必須使用那些鍵值而不是索引：

var xScale = d3.scale.ordinal()
    .domain(dataset.key)
    .rangeRoundBands([0, w], 0.05);
// ...
.attr("x", function(d, i) {
  return xScale(dataset.key[i]);
})

您可以通過合並鍵和值數組使它們變得更好，使它們都屬於同一數據元素。

至於另一個問題，這是因為您正在選擇text元素，其中包括軸標簽。 即使具有鍵功能，該功能在這里也不起作用，因為其中一個軸標簽與您要在條形圖上顯示的標簽相同。 為這些標簽分配一個特殊的類別並進行相應的選擇可以解決此問題。

有關完整的jsfiddle，請參見此處 。