d3 X轴时间刻度

Question

我有时域数据。数据通常是30秒间隔。但有时设备会关闭，下一个数据会在1天后出现。

我希望数据点之间的距离相同（不是跳转或缩放图表）。即使时间被跳到第二天或明年，我也希望看到没有比例的图表。

我只在图表中添加一个数据点（最后两个数据之间的15小时），所有图表都被压缩到左侧，如图所示。

Image

<script>

// set the dimensions and margins of the graph
	var margin = {top: 10, right: 20, bottom: 40, left: 50},
		width = window.innerWidth-100,
		height = window.innerHeight-90 ;

// parse the date / time
	var parseTime = d3.timeParse("%Y-%m-%d %H:%M:%S");

// set the ranges
	var x = d3.scaleTime().range([0, width]);
	var y = d3.scaleLinear().range([height, 0]);

// define the 1st line
	var valueline = d3.line()
		.x(function(d) { return x(d.date); })
		.y(function(d) { return y(d.current); });

// define the 2nd line
	var valueline2 = d3.line()
		.x(function(d) { return x(d.date); })
		.y(function(d) { return y(d.intend); });

// append the svg obgect to the body of the page
// appends a 'group' element to 'svg'
// moves the 'group' element to the top left margin
	var svg = d3.select("body").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform",
			  "translate(" + margin.left + "," + margin.top + ")");

// Get the data

	d3.json("<?php echo "getGraphData.php?id=".$id."&type=".$type; ?>", function(error, data) {
		if (error) throw error;

  // format the data
	data.forEach(function(d) {
		d.date = parseTime(d.date);
		d.close = +d.current;
		d.open = +d.intend;
	});
  

  // Scale the range of the data
	x.domain(d3.extent(data, function(d) { return d.date; }));
	if(<?php echo $type ?> == 1){
		y.domain([
			d3.min(data, function(d) {
				if(Math.min(d.close, d.open) < 15){
					return Math.min(d.close, d.open);
				}else{
					return 15;
				} 
			}), 
			d3.max(data, function(d) {
				if(Math.max(d.close, d.open)>30){
					return Math.max(d.close, d.open);
				}else{
					return 30;
				}
			})
		]);
	}
  
    if(<?php echo $type ?> == 2){
		y.domain([
			d3.min(data, function(d) {
				return 0; }), 
			d3.max(data, function(d) {
				return 100; }
			)
		]);
    }	
  
  // Add the valueline path.
	svg.append("path")
		.data([data])
		.attr("class", "line")
		.attr("d", valueline);

  // Add the valueline2 path.
	svg.append("path")
		.data([data])
		.attr("class", "line")
		.style("stroke", "red")
		.attr("d", valueline2);

  // Add the X Axis
    svg.append("g")
		.attr("transform", "translate(0," + height + ")")
		.style("font-family", "\"Segoe UI\", Arial, sans-serif")
		.call(d3.axisBottom(x));

  // Add the Y Axis
    svg.append("g")
		.style("font-family", "\"Segoe UI\", Arial, sans-serif")
		.call(d3.axisLeft(y));

我用这些

来处理它

var n = 300;

var xScale = d3.scaleLinear()
    .domain([0, n - 1]) // input
    .range([0, width]); // output
	
// define the 1st line
var valueline2 = d3.line()
    .x(function(d, i) { return xScale(n - i); })
    .y(function(d) { return y(d.current); });

// define the 2nd line
var valueline = d3.line()
    .x(function(d, i) { return xScale(n - i); })
    .y(function(d) { return y(d.intend); });