更新

Question

我最近使用的是d3.js，我想出了一个问题，我找不到解决方法。

我需要一个堆叠的条/列，我可以配置类别（一行的一部分）的长度以及它具有的颜色。该长度由公式计算。整个线和图表的公式相同。

我想知道如何为这些类别和颜色指定自定义长度。一开始我只有一个矩阵，其数据由公式使用。我想我必须对数据做些什么。 -属性。顺便说一下，公式还考虑了图形高度和宽度，因此有可能在运行时重新计算数据。

我没有代码，因为我不知道从哪里开始。

编辑：

Here写的是你必须使用.stack（）来使用堆积条。并且[here] [2]使用.stack（），但here不是。我不明白为什么link3中的那些人不需要stack（）函数？此外，我写道，我必须提供

中的数据

      var dataset = [
    [ { x: 0, y: 5 },
      { x: 1, y: 4 },      
    ],
    [
     { x: 0, y: 10 },...]

表格，我的数据就像那个矩阵= [[val1，val2，.....，val10]，[val1，... val10]]

一个内部数组中的数据应该堆叠，Martix有大约5k个条目。我是否必须制作一个带有10个内部数组的矩阵，其中每个数组包含5个条目？最后，这些值从0到1，用样式还是用比例控制条形高度会更好吗？

Answer 1

D3js＆＃39; examples真的很棒。它们有很多，它们都包含源代码和样本数据。

我会从那里开始，看看你是否能找到一个你喜欢的。

This one是我对最接近你想要的东西的最佳猜测。

他重新排列了条形的宽度，所以他已经为你提供了改变大小的功能，你只需要使它适用于你的数据。

更新

在您链接到的第一个示例中，.stack()函数用于已在答案中提供的格式的数据。因此，这个功能对你没什么帮助。

第二个例子他说他避免使用.stack()函数，因为你可以手动完成。

此示例不使用d3.layout.stack，因为很容易通过array.forEach独立堆叠每个状态。

我不确定one inner Array should be stacked是什么意思。

在示例中，数据堆叠如此（为了清楚起见，我更改了名称并添加了注释）：

var dataset = [
    // Columns a, b, and c
    { a: 5, b: 10, c: 22 }, // row 1
    { a: 4, b: 12, c: 28 }, // row 2
    { a: 2, b: 19, c: 32 }, // row 3
    { a: 7, b: 23, c: 35 }, // row 4
    { a: 23, b: 17, c: 43 } // row 5
];


var bars_dataset = [
    // Stacked Bar #1
    [
            { x: 0, y: 5 }, // row 1, column a
            { x: 1, y: 4 }, // row 2, column a
            { x: 2, y: 2 }, // row 3, column a
            { x: 3, y: 7 }, // row 4, column a
            { x: 4, y: 23 } // row 5, column a
    ],
    // Stacked Bar #2
    [
            { x: 0, y: 10 }, // row 1, column b
            { x: 1, y: 12 }, // row 2, column b
            { x: 2, y: 19 }, // row 3, column b
            { x: 3, y: 23 }, // row 4, column b
            { x: 4, y: 17 }  // row 5, column b
    ],
    // Stacked Bar #3
    [
            { x: 0, y: 22 }, // row 1, column c
            { x: 1, y: 28 }, // row 2, column c
            { x: 2, y: 32 }, // row 3, column c
            { x: 3, y: 35 }, // row 4, column c
            { x: 4, y: 43 }  // row 5, column c
    ]
];

我认为你已经知道了，bars_dataset中有三行，因为dataset中有三列。如果您想要堆叠条形图，那么是的，您将拥有一个包含10个~5k对象的10个数组的bars_dataset。

但是，如果你想让矩阵中有10个值的第一个数组构成第一个条，依此类推......那么你需要有一个bars_dataset〜5k的数组，其中包含10个对象他们每个人。

从您提出问题的方式来看，似乎您需要第二种解决方案，而不是第一种解决方案。无论您计划如何堆叠它们，请告诉我，我将使用一些示例代码更新我的答案。

d3.js堆积条形图自定义高度为Category

1 个答案:

更新