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") 
}

如果编译代码，则打印为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}}];

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