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

Question

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

例如：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轴域值必须是唯一的才能正常工作。

所以你response值不是唯一的，并在理论上你answer并不一定是唯一的要么。此外，使用answer作为域，然后通过索引获取数据看起来很脏，并且在重新排序数据时可能会导致意外的结果。

要获得唯一值的Ÿ域，你可以一个唯一的ID添加到您的每个数据对象如：

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

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

然后一个tickFormat添加到Y轴：

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

Answer 2

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