Question

D3.js的新手，并尝试使用275组值创建条形图。我使用了一个有序刻度来沿x轴定位条形，最后一个值返回“未定义”，因此一直定位在左边。我无法弄清楚为什么，或者如何解决它......

以下是我所拥有的要点：https://gist.github.com/shawnparrotte/2e17c4914771f3ea5fe6

第81-84行之间的功能是它向下的位置，特别是在第83行：

   bands.range()[i]

谢谢你看看这个！

**编辑：似乎序数标度仅返回274个值，即使我发送了275个值的数组...请参阅第70-73行。奇怪。

Answer 1

当你这样做时：

    var yScale = d3.scale.linear()
                         .domain( [0, maxGDP] )
                         .range( [0, gHeight] );

这意味着您的y轴基于gdp。

但是当你这样做时：

          // ordinal scale for the bar width
        var bands = d3.scale.ordinal()
                            .domain(gdp)//this is strange! should be dates
                            .rangeBands( [0, gWidth], .2);

这意味着你的x轴与GDP有关，这很奇怪！

应该与日期相关联。

         // ordinal scale for the bar width
        var bands = d3.scale.ordinal()
                            .domain(dates)
                            .rangeBands( [0, gWidth], .2);

这将解决您的问题。

<强>最后：

为什么当你有275个时，你会看到274个测距带！

var bands = d3.scale.ordinal()
                                .domain(gdp)
                                .rangeBands( [0, gWidth], .2);

原因有2 gdp是相同的，并且scale ordinal将始终提供唯一的范围带，因此对于275 gdp，在获得唯一后获得274。

但是，您应该将x域视为日期。

工作代码here

希望这有帮助！

D3.js .rangeBands（）返回'undefined'只有最后一个值？

1 个答案: