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 中的序数标度将相应的值映射到其在图表内的位置。你必须有独特的数据在域每个条目如果你想让它两个月映射到不同的区域，您正在使用，以地图到值。如果域中的任何值在传递给序数函数时再次使用，则它们将映射到为第一个值映射的相应位置。

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}}]; 

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