javascript - 如何使用 scaleTime 水平定位背景矩形

Question

我希望 d3 js 图表具有基于某些时间戳的不同背景矩形。

var orangeBack = svg
  .append("rect")
  .attr("x", margin.left + 0)
  .attr("y", margin.top)
  .attr("height", containerHeight - 120)
  .attr("width", 200)
  .style("stroke", bordercolor)
  .attr("fill", "orange")
  .attr("opacity", 0.2)
  .style("stroke-width", border);

我根据以下内容创建了一个 d3 js 图表:

我的代码沙箱 - https://codesandbox.io/s/quizzical-bhabha-4ullr?file=/src/TimelineChart.js

现在我在 width 中给出了 200 但这将是我的 x 比例的时间戳。

.attr("width", 200)

如何使用 x 比例尺按时间戳水平定位矩形？

.attr("width", xScale()) // or XDomain something.. 

我尝试使用比例尺，例如但它不起作用。

  var orangeBack = svg.selectAll("rect")   
    .data(data)
    .enter()
    .append("rect")
    //.attr("x", margin.left + 0)
    .attr("x", function(d){return xScale(d.startTime)})
    .attr("y", margin.top)
    .attr("height", containerHeight - 120)
    // .attr("width",  200)
    .attr("width", function(d){return (xScale(d.startTime) - xScale("1568283720049"));})
    .style("stroke", bordercolor)
    .attr("fill", "orange")
    .attr("opacity", 0.05)
    .style("stroke-width", border);

任何引用都会有所帮助。谢谢..

我正试图遵循这样的事情.. How to add background shading to D3 line chart

Answer 1

这就是我试图实现这一目标的方式。让我知道我们是否可以做得更好。

var orangeBack = svg
  .selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", margin.left)
  // .attr("x", function (d) {
  //   return xScale(1568283720049);
  // })
  .attr("y", margin.top)
  .attr("height", containerHeight - 120)
  // .attr("width",  200)
  .attr("width", function (d) {
    return xScale(1568283720049) - xScale(1567851720049) + 10;
  })
  .style("stroke", bordercolor)
  .attr("fill", "orange")
  .attr("opacity", 0.05)
  .style("stroke-width", border);

目前我已经直接给出了时间戳，例如xScale(1568283720049) 这可以动态完成。

代码沙箱 - https://codesandbox.io/s/quizzical-bhabha-4ullr?file=/src/TimelineChart.js