javascript - 使用 d3.js 的水平条形图出现错误

标签 javascript d3.js

我创建了一个horizontal bar chart使用 d3.js,如果没有出现相同的列值(这里是“响应”字段),一切都会正常工作。

例如:var data = [{ "answer": "答案2", “回复”:5, “总计”:7, “颜色”:“#ff4700” }, { "answer": "答案3", “回复”:5, “总计”:7, “颜色”:“#0ED5EE” }, { "answer": "回答4", “回应”:1, “总计”:7, “颜色”:“#31EE0E” }]; 如果我们在“响应”字段上提供相同的值(例如重复 5),则生成的条形计数将与预期不匹配,否则它将完美绘制。 你能帮我解决这个问题吗? 感谢和问候

最佳答案

对于 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

关于javascript - 使用 d3.js 的水平条形图出现错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46802557/

相关文章:

javascript - 在 IE9 中设置样式属性时哪些值无效?

javascript - d3Service/d3-ng2-service TypeScript TS2346 提供的参数与签名不匹配

d3.js - NVD3 堆积条形图加线重叠

javascript - 增加/减少 url 路径名单击

javascript - Google Maps Javascript API 不响应 iOS 10 中的触摸事件

javascript - RFC 电子邮件正则表达式模式在 Visual Studio 中显示为错误?

javascript - 同时使用 Angular 1 和 Angular 2

php - 如何在javascript函数中编写php函数

javascript - 使用 queue() 加载多个文件并分配给全局变量

javascript - SVG D3 图像调整大小问题