d3js 将音量条添加到折线图答案

【问题标题】：d3js add volume bars to line graphd3js 将音量条添加到折线图
【发布时间】：2018-07-22 22:17:20
【问题描述】：

我用 d3js 构建了这个折线图：jsfiddle

示例数据：

{
    date: '18-May-18',
    close: 281755783529,
    volume: 11792035643,
    notes: null
}

如何使用数据中的“体积”值绘制与每个日期对应的矩形条？带有音量条的折线图看起来像这样：

谢谢！

【问题讨论】：

标签： d3.js bar-chart linegraph

【解决方案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 域扩展为左右各一天。

【讨论】：

感谢您的回答。它对我来说无法正确显示。你介意提供一个更新的小提琴吗？
这似乎是在创建两个不同的 y 轴，而不是加入两个
close 的最大值和volume 的最大值不太可能具有相似的值，因为它们描述的内容不同。因此，要充分利用条形的高度，您需要一个新的 yScale，因为域不同。在您的示例中，这些值相差 10 倍。