【问题标题】:Stack and nest not working converting v3 to v4堆栈和嵌套无法将 v3 转换为 v4
【发布时间】:2017-12-12 22:57:03
【问题描述】:

我正在将 Mike Bostock 的原始 Stacked Area Chart via Nest example 转换为 d3 v4,但在调用 stack(nest.entries(data)) 时我显然没有得到正确的结果

我在这里有一个可以工作的 v3 codepen - https://codepen.io/lebadget/pen/ypLZpJ

这里是破坏的 v4 codepen - https://codepen.io/lebadget/pen/VywgxG

谁能帮我理解为什么 v4 会为 layers 返回一个空数组(第 121 行是出错的地方)。

更新:

我把它缩小到这个:

// v3 const groupedData = nest.entries(data); var layers = stack(groupedData); console.log('layers', layers);

"layers" [Object] 是的,它有效!

// v4 const groupedData = nest.entries(data); var layers = stack(groupedData); console.log('layers', layers);

"layers": []什么都没有

【问题讨论】:

    标签: javascript d3.js


    【解决方案1】:

    我在 D3 小组线程上看到了您对问题跟踪的帮助请求,并在此处查看了您的代码。

    我的理解是 Stack (D3 v4) 需要一个转置的数据集才能传递给它。其中每行数据表示给定“堆栈”的所有值图,每个键都存在于该行对象上。在您的代码中,当您需要按行对数据进行分组时,您可以将数据按系列(Group1、Group2、Group3)分组。

    查看 Mike 的相关文档,特别是显示数据如何传递到堆栈的部分:

       var data = [
         {month: new Date(2015, 0, 1), apples: 3840, bananas: 1920, cherries: 960, dates: 400},
         {month: new Date(2015, 1, 1), apples: 1600, bananas: 1440, cherries: 960, dates: 400},
         {month: new Date(2015, 2, 1), apples:  640, bananas:  960, cherries: 640, dates: 400},
         {month: new Date(2015, 3, 1), apples:  320, bananas:  480, cherries: 640, dates: 400}
      ];
    

    https://github.com/d3/d3-shape/blob/master/README.md#_stack

    干杯,

    汤姆

    【讨论】:

    • Tom,既然你提到它就完全有道理!
    • 是的,几乎所有数据即库中最脆弱的部分之一是对底层数据结构的假设,这些假设很难通过 API 实施。
    猜你喜欢
    • 2020-09-30
    • 1970-01-01
    • 2021-09-22
    • 1970-01-01
    • 2017-06-06
    • 2020-07-28
    • 2016-06-25
    • 1970-01-01
    • 2018-09-03
    相关资源
    最近更新 更多