Line Plus Bar多棒？

Question

我正在尝试使用默认线加条形图制作图表，但我想在条形图中使用两个或更多个流，是否可能？

目前，当我尝试这样做时，我对图表的效果遇到了一些麻烦，因此我无法正确显示条形图的悬停气球，他总是只显示其中一个流的数据。但主要问题是x轴的日期，显示1970年代的日期，当我删除第二个条形流时，日期显示良好：

任何人都已经尝试成功完成此类图表了吗？

修改

添加小提琴：

Fiddle with two columns stream and messy dates

Fiddle with just one column stream and ok dates

我正在调用这种图表：

linePlusBarChart()

Answer 1

日期的问题是您的数据包含时间戳（即以秒为单位），但Javascript需要毫秒。通过将值乘以1000可以很容易地解决这个问题：

series.values = series.values.map(function (d) {
            return {
                x: d[0]*1000,
                y: d[1]
            }
});

工具提示问题实际上是NVD3中的一个错误 - 它并不意味着以这种方式使用。问题归结为mouseover处理程序，假设数据的第一项代表您想要的内容。您可以通过按模数2的数据点编号选择项目来解决此问题（因为有两个条形码）：

.on('mouseover', function(d,i) {
        d3.select(this).classed('hover', true);
        dispatch.elementMouseover({
            point: d,
            series: data[i%2],
            pos: [x(getX(d,i)), y(getY(d,i))],
            pointIndex: i,
            seriesIndex: i%2,
            e: d3.event
        });
      })

这只适用于两个酒吧系列。使用修改后的NVD3代码here更新了jsfiddle。