d3.js堆栈布局从v3升级到v4 [英] d3.js stack layout upgrading from v3 to v4

问题描述

使用D3 v3，我格式化我的数据以匹配迈克的例子，以快速启动我的开发过程。示例页面在此 https：// github。 com / d3 / d3-3.x-api-reference / blob / master / Stack-Layout.md

Using D3 v3, I formatted my data to match Mike's example to quick start my dev process. Example page here https://github.com/d3/d3-3.x-api-reference/blob/master/Stack-Layout.md

var data = [
  {
    "name": "apples",
    "values": [
      { "x": 0, "y":  91},
      { "x": 1, "y": 290}
    ]
  },
  {
    "name": "oranges",
    "values": [
      { "x": 0, "y":  9},
      { "x": 1, "y": 49}
    ]
  }
];

然后我必须做的是获取堆叠的值

Then all i had to do to obtain the stacked values was

var stack = d3.layout.stack().values(d=>d.values)

var layers = stack(data)

他在他的例子中是怎么做的。

Exactly how he did it in his example.

然而，在v4中，看起来堆栈函数需要表格格式的数据，因此上面的数据看起来像这样。

However, in v4 it seems like the stack function expects tabular formatted data, so the above data would look like this.

var data = [
  {x: 0, apples: 91, oranges: 9},
  {x: 1, apples: 290, oranges: 49},
];

有一个简单的方法来保持我的数据格式和使用v4堆栈函数？我似乎不能找到新的方式做到这一点。在我当前的数据格式，我有与values数组相关联的有用的属性。如果我将我的数据格式更改为表格，我看不到一个方便的方法将属性与值配对。

Is there an easy way to keep my data format and use the v4 stack function? I can't seem to grok the new way to do this. In my current data format, i have useful properties associated with the values array. If i change my data format to tabular, I don't see a convenient way to pair properties with values.

推荐答案

一直有同样的问题。不幸的是，新的方式似乎不匹配API序列化模型实例的方式（类似于您的原始数据）;而是你坚持使用JSONify表格数据格式。我觉得这样工作时，你使用csv dumps，但这通常不是如何组织数据库。

I've been having the same problem. Unfortunately, the new way doesn't seem to match the way APIs serialize model instances (sort of like your original data); instead you're stuck with JSONified tabular data format. I feel like this works when you're working with csv dumps, but that's not generally how databases are organised.

我已经发布了一个相关的答案其中将按对象分组的格式（例如，您的示例中的水果）转换为数据点格式（按照您的示例中的x坐标）由 d3.stack（）。您将能够根据您的具体情况调整代码。

I've posted a related answer here that transforms object-grouped format (eg by fruit in your example) into data-point format (by x-coordinate in your example) as expected by d3.stack(). You'll be able to adapt the code to your particular case.

这篇关于d3.js堆栈布局从v3升级到v4的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！