d3.js - d3js 将音量条添加到折线图

Question

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

示例数据：

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

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

谢谢！

标签： d3.jsbar-chartlinegraph

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 域扩展为左右各一天。