javascript - 为分组条形图设置域时出错

Question

我正在通过 d3.js 制作组条形图，但收到一个错误，我无法找出原因。我还是 d3.js 的新手，正在尝试自己学习脚本。来自社区的任何帮助将不胜感激。

错误是由这段代码引起的:

y.domain([0, d3.max(data, function(s_category) { 
    return d3.max(s_category.values, 
        function(d) { 
            return d.count; }); 
    })
]);

错误:

Uncaught TypeError: Cannot read property 'length' of undefined

以下是我的完整代码:

https://blockbuilder.org/lydiawawa/9efb5df76c08640316efbef702437db7

在图表上，count 应该是 y 轴，drug_c 是 x 轴，s_category 确定条形图的组。

Answer 1

鉴于您的数据结构只是对象的平面数组，您用于获取域的代码片段毫无意义。

但是，知道:

1. 这是一个分组条形图，并且...
2. 您在代码中进一步使用值。

在我看来，您打算使用 nest 生成器，如下所示:

const nestedData = d3.nest()
    .key(function(d){return d.s_category})
    .entries(data);

这里是你的代码更改:http://bl.ocks.org/GerardoFurtado/80ba2580f758a64046c3e6f513203cd2/7aa3816ad65ed09bd99eeb29ba80892e19cdcbd0

---

PS:您对波段尺度的填充的使用是错误的，对于颜色的波段尺度也是如此(它应该是有序的)。另外，我删除了图例，你必须修复那段代码。