如何使用scaleTime水平放置背景矩形 [英] How to use scaleTime to horizontally position a background rectangle

问题描述

我想让d3 js图表具有基于某些时间戳的不同背景矩形.

I want to have the d3 js chart with a different background rectangle based on some timestamps.

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图表:

I have a d3 js chart created per below:

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

现在我给了 200 为 width ，但这是我在x刻度上的时间戳.

Right now I have given 200 in width but this will be my timestamp in x scale.

.attr("width", 200)

如何使用x缩放比例通过时间戳水平定位矩形?

How I can use x scale for horizontally positioning the rectangle by timestamp ?

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

我尝试使用磅秤但它不起作用.

I tried to use scale e.g. but it's not working.

  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);

任何参考资料都会有所帮助.谢谢.

Any reference will be helpful. Thanks..

我正在尝试遵循类似的方法.如何在D3折线图中添加背景底纹

I am trying to follow something like this.. How to add background shading to D3 line chart

推荐答案

这就是我试图实现的方法.让我知道我们还能做些什么.

This is how I am trying to achieve this. Let me know if anything better we can do.

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)这可以动态完成.

currently I have given the timestamp directly e.g. xScale(1568283720049) this can be done dynamically.

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

这篇关于如何使用scaleTime水平放置背景矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！