Question

我创建了一个D3图表，希望通过数据的“ start_time”属性设置“ x”坐标（矩形）。 “ x”轴刻度设置为最近六个小时。 “ start_time”在六个小时的范围内，因此我试图使我的数据与x轴上的时间范围相匹配。（当前“ start_time”是5:30 am，我希望矩形在x轴的5:30 am开始）。我的代码在下面，谢谢！

我正在使用moment.js来创建时间范围，因此就两个数据属性而言，彼此之间可能存在问题。

提琴：http://jsfiddle.net/dtepdc/bmry9f04/4/

const data = [
{
    "start_time": "2019-01-15T05:30:40",
    "end_time": "2019-01-15T04:32:25",
    "elapsed_time": 89,
    "mynum":"CO12345"
}
  ];

const svgWidth = 700, svgHeight = 300;

const svg = d3.select('svg')
 .attr("width", svgWidth)
 .attr("height", svgHeight);

const start = moment().format('LLL');
const end = moment().subtract(12, 'hours').format('LLL');
const dataFormat = moment(data[0].start_time).format('LLL');

console.log('start: ', dataFormat)

const xScale = d3.scaleTime()
.domain([new Date(start), new Date(end)])
.range([0, svgWidth]);

const x_axis = d3.axisBottom()
.scale(xScale);

 svg.append("rect")
 .attr("width", "100%")
 .attr("height", "86%")
 .attr("fill", "#000");

svg.append("rect")
 .attr('x', function(d) { return d ; })
 .attr("y", 120)
 .attr("width", data[0].elapsed_time)
 .attr("height", 40)
 .attr("fill", "green");

svg.selectAll("text")
 .data(data)
 .enter()
 .append("text")
 .text(function(d) {
     return d.mynum;
 })
 .attr("x", 120)
 .attr("y", 148)
 .attr("width", data[0].elapsed_time)
 .attr("height", 50)
 .attr("font-size", 14)
 .attr("fill", "#fff");

const xAxisTranslate = svgHeight - 40;

svg.append("g")
 .attr("transform", "translate(50, " + xAxisTranslate  +")")
 .call(x_axis)
 .selectAll("text")

Answer 1

我不是d3英雄，但我的方法是创建我的时间刻度实例，然后使用该实例将日期转换为数字。

x = d3.scaleTime().range([0, axisWidth]);
var xPos = x(moment(d.positionDate, "MM/D/YYYY h:mm a"));

因此，在您的情况下，它将类似于：

svg.append("rect")
 .attr('x', function(d) { 
    return moment(d.start_time, "MM/D/YYYY h:mm a") // not correct formatting
   })
 .attr("y", 120)
 .attr("width", data[0].elapsed_time)
 .attr("height", 40)
 .attr("fill", "green");

您应该为您的““ 2019-01-15T05：30：40”数据查找moment格式标记

D3-如何设置“ x”坐标“ rect”值的起始位置以匹配“ x”轴上的时间/日期

1 个答案: