使用d3.js的水平條形圖上的錯誤

Question

我已經使用d3.js創建了一個水平條形圖，並且如果沒有相同的列值（這里是“響應”字段）出現，那么一切工作都會很好。

例如： var data = [{ "answer": "Answer2", "response": 5, "total": 7, "color": "#ff4700" }, { "answer": "Answer3", "response": 5, "total": 7, "color": "#0ED5EE" }, { "answer": "Answer4", "response": 1, "total": 7, "color": "#31EE0E" }]; 如果我們在“響應”字段上提供相同的值（例如重復5），則所得的柱數將不符合預期，否則將完美繪制。 您能幫我解決這個問題嗎？ 謝謝並恭祝安康

Answer 1

對於y域，請在您的情況下提供唯一的名稱答案 ：

   .domain(data.map(function(d) {
     return d.answer;
   }));

然后為y軸提供刻度格式：

   .tickFormat(function(d, i){         
   var d = data[i];
   var percentage = parseFloat( (d.response/d.total) * 100).toFixed(1)
   return percentage + '%'; })

這里的工作代碼

Answer 2

y軸域值必須唯一才能正常工作。

因此，您的response價值也不是唯一的，理論上您的answer也不必是唯一的。 此外，將answer用作域，然后通過索引獲取數據似乎很臟，並且在（重新）排序數據時可能會導致意外結果。

為了獲得y域的唯一值，您可以向每個數據對象添加唯一ID，例如：

var data = [{
  "uniqueId": 1,
  "answer": "Answer2",
  "response": 5,
  "total": 7,
  "color": "#ff4700"
},....]

y.domain(data.map(function(d) { return d.uniqueId; }));

然后將tickFormat添加到yAxis：

yAxis.tickFormat(function(id, i){         
  var d = data.find(function(d) { return d.uniqueId === id; });
  var percentage = parseFloat( (d.response/d.total) * 100).toFixed(1)
  return percentage + '%';
})

結果： https : //jsfiddle.net/rd8z5k32/1/

或者，您可以只使用數據數組的索引作為域：

y.domain(d3.range(data.length));

yAxis.tickFormat(function(_d, i){      
  var d = data[i];
  var percentage = parseFloat( (d.response/d.total) * 100).toFixed(1)
  return percentage + '%';
})