NVD3.js multiChart x轴标签对齐到多条线，但不是多条 [英] NVD3.js multiChart x-axis labels is aligned to multiple lines, but not multiple bars

问题描述

此问题涉及

谢谢！

解决方案

这里的问题是 nv.models.multiChart 为它的x轴使用线性刻度，然后当它绘制条形时，它调用 nv.models.multiBar ，它使用 .rangeBands（）。

您可以通过源代码跟踪此错误：

首先让我们看看 multiChart.js

。如果你试图在nvd3中工作，这是非常复杂的，许多其他人已经尝试，没有切换出nvd3图表使用的默认刻度。请查看自1月以来开放的 nvd3 github网页上的这个问题， 2013年。

我自己尝试了多种方法来重复使用酒吧的序数，但效果不大。如果你想偷偷摸摸，试图自己强制它，我可以告诉你，从我的实验我最接近使用 chart.bars1.xScale（）。copy（）复制条形图的刻度，并设置其域和rangeBands。不幸的是，由于图表的宽度是在渲染时计算的，而我似乎不能在 chart.update 函数中创建一个钩子，因此不可能设置rangeBands'

简而言之，如果您不能使用标签偏移量，您可能需要编写自己的图表nvd3，或者为您的可视化查找不同类型的布局。

This question relates to NVD3.js multiChart x-axis labels is aligned to lines, but not bars

I am using NVD3.js multiChart to show multiple lines and multiple bars in the chart. All is working fine, but the x-axis labels is aligned only to the line points, not bars. I want to correctly align labels directly below the bars as it should. But I get this:

As you can see - x-axis (example, 2014-Feb) is not aligned to Bars.

1) How to align x-axis labels to bars and lines at the same time?

2) I need this solution for NVD3.js or how to properly integrate.

I made jsFiddle: http://jsfiddle.net/n2hfN/28/

Thanks!

解决方案

The problem here is that nv.models.multiChart uses a linear scale for its x-axis, and then when it draws the bars it calls nv.models.multiBar, which uses an ordinal scale with .rangeBands().

You can follow this mess through the source code:

First lets look at multiChart.js

HERE is where it sets the x-scale to be a linear scale.

HERE it calls the nv.models.multiBar model to create the bars.

If we jump over to have a look at multiBar.js

HERE it creates an ordinal scale, and HERE it sets the range of the scale using .rangeBands()

The result is that the ordinal scale used for placing the bars, and the linear scale used for the chart's axis do not align. Here's what the two scales look like on their own if plotted on an axis:

The solution would be to force the chart to render the line graphs and the x-axis in terms of the ordinal scale used by the bars. This would work in your case because the bars and the lines all use the same data for the x-axis. This is very simple to do if you are making your own chart and not relying on nvd3, as I showed in my answer to your previous question HERE. This is extraordinarily complicated to do if you're trying to work within nvd3, and many others have tried and failed to switch out the default scales used by nvd3 charts. Have a look at this issue on the nvd3 github page that has been open since January, 2013 for example.

I've tried a number of approaches myself to reuse the bars' ordinal scale, but with little success. If you want to poke around and try to brute-force it yourself, I can tell you that from my experiments I came closest when using chart.bars1.xScale().copy() to make a copy of the bars' scale, and set its domain and rangeBands. Unfortunately, since the chart's width is computed at render time, and I can't seem to create a hook into the chart.update function, it is impossible to set the rangeBands' extent to the correct values.

In short, if you can't live with the labels being offset, you're probably going to need to code up your own chart without nvd3, or else find a different type of layout for your visualization.

这篇关于NVD3.js multiChart x轴标签对齐到多条线，但不是多条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！