Question

我使用d3.js创建了一个horizontal bar chart，如果没有相同的列值（这里是'response'字段），每件事都可以正常工作。

例如：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 + '%'; })

工作代码here

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; }));

然后在yAxis中添加tickFormat：

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 + '%';
})

使用d3.js在水平条形图上出错

2 个答案: