in nvd3 multibarchart, some stacks lose their colors or otherwise become invisible

问题

How do I ensure that bars in multibarchart in nvd3 always starts from same level? What I am seeing is that some series start kinda "floating" in the air (actually one of the stacks loses its color)

Please see http://jsfiddle.net/TZ2kH/1/ and click on "stacked" option (initial settings - that is another question)

My data series is very short, just 3 rows - 2 in one sub-series and 1 in another sub-series.

data_multiBarChart = [{
    'values': [ {
        'y': 7,
            'x': 9
    }],
        'key': 'Count',
        'yAxis': '1'
}, {
    'values': [{
        'y': 12,
            'x': 0
    }, {
        'y': 8,
            'x': 1
    }],
        'key': 'Duration',
        'yAxis': '1'
}];

Thanks.

--EDIT--

FWIW warnings seen in firebug console:

Unexpected value NaN parsing height attribute.
this.setAttribute(name, f(t));

I have also seen with similarly sparse data:

Unexpected value NaN parsing height attribute.
...3.interpolateRgb=function(e,t){e=d3.rgb(e),t=d3.rgb(t);var n=e.r,r=e.g,i=e.b,s=t...

回答1:

Its because of the data you are passing into the chart. The count of sub-series in you chart must be equal, if you do not have a value you must at least set the y value to 0.

A multiple bar graph contains comparisons of two or more categories or bars. When the chart is drawn, the X-Axis must be in a sequence, take a look at how the X-Axis is lined up in this fiddle

Try using the data as shown below :

data_multiBarChart = [{
    'values': [{
        'y': 0,
            'x': 1
    }, {
        'y': 8,
            'x': 2
    }],
        'key': 'Count',
        'yAxis': '1'
}, {
    'values': [{
        'y': 12,
            'x': 1
    }, {
        'y': 8,
            'x': 2
    }],
        'key': 'Duration',
        'yAxis': '1'
}];

Hope I made sense, and helps solve your problem.

来源：https://stackoverflow.com/questions/16938056/in-nvd3-multibarchart-some-stacks-lose-their-colors-or-otherwise-become-invisib