d3js将音量条添加到折线图

Question

我使用d3js构建了此折线图：jsfiddle

示例数据：

mvn -version

如何使用数据中的“体积”值绘制与每个日期相对应的矩形条？带有音量条的折线图如下所示：

谢谢！

Answer 1

由于volume使用了不同的Y范围，因此您需要为此定义一个新的yScale

var yVolume = d3.scaleLinear().range([height, 0]);
yVolume.domain([0, d3.max(data, function(d) { return d.volume; })]);

为此比例尺绘制一个右轴

var yAxisVol = d3.axisRight(yVolume).ticks(10);
svg.append("g")
  .attr("class", "yaxisVol")
  .attr("transform", `translate(${width},0)`)
  .call(yAxisVol);

然后在正确的位置绘制矩形

svg.append("g").attr("class", "barsVol")
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("fill", "yellow")
  .attr("x", function(d) { return x(new Date(d.date.getTime()-11*60*60*1000)); })
  .attr("y", function(d) { return yVolume(d.volume); })
  .attr("height", function(d) { return height - yVolume(d.volume); })
  .attr("width", function(d) {
         return x(new Date(d.date.getTime()+11*60*60*1000)) - 
                x(new Date(d.date.getTime()-11*60*60*1000)); });

这些矩形的宽度为1个“天”（22小时）。

将剪贴矩形添加到barsVol组中，或将x域扩展到左右两天。