javascript - nvd3 离散条形图值重叠

Question

我正在使用 nvd3.js 创建我的自定义离散条形图，我需要传递 2 个值数组而不是一个。 这是来自离散条形图的 nvd3 示例的默认数据数组:

historicalBarChart = [
            {
                key: "Cumulative Return",
                values: [
                    {
                        "label": "May",
                        "value": 32,
                    },
                    {
                        "label": "Jun",
                        "value": 22
                    },
                    {
                        "label": "Jul",
                        "value": 37
                    },
                    {
                        "label": "Aug",
                        "value": 42
                    },
                    {
                        "label": "Sep",
                        "value": 18
                    },
                    {
                        "label": "Oct",
                        "value": 14
                    },
                    {
                        "label": "Nov",
                        "value": 34
                    },
                    {
                        "label": "Dec",
                        "value": 5
                    }
                ]
            }
        ];

这是图表的图片http://www.dodaj.rs/f/47/BU/3mMgYntS/screen-shot-2013-12-21-a.png 这就是我的样子:

当我添加第二个数据数组时，我的条形图在此图像上看起来像 http://www.dodaj.rs/f/k/MP/4yKWKm66/screen-shot-2013-12-21-a.png

正如您在第二张图片中看到的那样，条形图变细了，每个月都有 2 个条形图的空间，但它们重叠而不是一个接一个地排列。我已经尝试了所有方法，但我是 nvd3 的新手，我无法弄清楚如何使条形不重叠。

Answer 1

为什么多个值映射到图表中的同一位置？

问题在于 NVD3 代码中使用的基础比例尺。 d3 中的序数刻度将相应的值映射到其在图表中的位置。您必须拥有唯一数据 每个条目 在您用于映射 strong> 到 一个值 如果你想让它把两个月映射到一个不同的区域。如果您的域中的任何值在传递给序数函数时再次使用，它们将被映射到为第一个值映射的相应位置。

var domain= ["January","February",...,"December"];

var set1 = [{"Month":"January", "Value":2},{{"Month":"February", "Value":3}}];
var set2 = [{"Month":"January", "Value":6},{{"Month":"August", "Value":20}}];

var ordinalScale = d3.scale().ordinal().domain([domain]);

if (ordinalScale(set1[0].Month) == ordinalScale(set2[0].Month))
{
    console.log("true") 
}

如果代码已编译，这将打印为真。

直观地理解问题:

您面临的问题是您使用的是一对一函数。可以这样想

假设您有一个域 (x = 1..10)。定义函数 f(x) = x + 1

如果你输入 x 会发生什么？

f(1) = 2

f(2) = 3

f(1) = 2

请注意您是如何多次出现为同一输入生成相同的 x 的？这是应该发生的，因为您将 f(x) 定义为那样。

解决方案:

解决此问题的一种方法是使用不同类型的图表，例如分组图表。您可以自己解决此问题的另一种方法是为每条数据生成一个唯一值作为您的域值，例如下面对上述数据的修改。

var set1 = [{"Month":"January", "Value":2, "Serial":1},{{"Month":"February", "Value":3},"Serial":2}];
var set2 = [{"Month":"January", "Value":6,"Serial":3},{{"Month":"August", "Value":20, "Serial":4}}];

使用它可以解决您的问题，但会产生一个新问题。由于您使用域值来生成标签，因此您将显示值而不是月份。要解决此问题，您可以使用刻度格式化程序来显示月份而不是序列号。