d3.js - Line Plus Bar 与 Multi Bar？

Question

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

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

有人已经尝试过成功地制作这种图表吗？

编辑

添加小提琴：

摆弄两列流和凌乱的日期

只摆弄一列流和好的日期

我称这种图为：

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 代码更新了 jsfiddle 。