d3.js类别的堆叠条形图自定义高度

Question

我最近使用的是d3.js，但遇到一个问题，无法找到解决方案。

我需要一个堆叠的Bar / column，可以在其中配置Category（一行的一部分）多长时间以及它具有哪种颜色。 该长度是根据公式计算的。 对于整个折线和图表，此公式相同。

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

我不显示任何代码，因为我不知道从哪里开始。

编辑：

在这里 ，您必须使用.stack（）来使用堆叠的条。 [here] [2]使用的是.stack（），但这里没有。 我不明白为什么link3中的那些不需要stack（）函数？ 此外，我写到我必须提供数据

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

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

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

Answer 1

D3js的示例非常棒。 它们有很多，它们都包含源代码和示例数据。

我将从那里开始，看看您是否可以找到自己喜欢的一个。

这是我最接近您想要的一个的最佳猜测。

他重新排列了条形图的宽度，因此他已经为您提供了更改大小的功能，您只需要使其与数据一起使用即可。

更新资料

在您链接到的第一个示例中， .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个由bars_dataset对象组成的数组的bars_dataset 。

但是，如果您希望矩阵中的第一个数组包含10个值，以此类推，依此类推...那么您将需要拥有大约5k数组的bars_dataset ，每个数组中包含10个对象。

从您表达问题的方式来看，您似乎想要第二个解决方案，而不是第一个。 无论您打算采用哪种方式堆叠它们，请让我知道，我将用一些示例代码来更新我的答案。