时间戳

首页 > 解决方案 > D3.js：让 x 轴在时间序列图中每秒平滑过渡？

javascript - D3.js：让 x 轴在时间序列图中每秒平滑过渡？

问题描述

我试图让我的 x 轴平滑连续地转换为时间序列图。到目前为止，它每秒钟都在转换、停止、转换、停止……；我的时间窗口是 10 秒。

此外，转换在我的 x 轴之外开始和停止。有简单的解决方法吗？谢谢您的考虑！这是我的工作示例：

////////////////////////////////////////////////////////////
////////////////////// Set-up  /////////////////////////////
////////////////////////////////////////////////////////////

const margin = {
  left: 80,
  right: 80,
  top: 30,
  bottom: 165
};

//Actual graph smaller than svg container 
var width = $('#chart').width() - margin.left - margin.right;
var height = $('#chart').height() - margin.top - margin.bottom;

//yAxis
const yDomain = [0, 70];
const yTickValues = [0, 10, 20, 30, 40, 50, 60, 70];

const TIME_INTERVAL = 1000;

//xAxis domain-> 10 seconds 
const originalTime1 = "1970-01-01T00:00:00",
  originalTime2 = "1970-01-01T00:00:10";

var date1 = new Date(originalTime1).getTime(),
  date2 = new Date(originalTime2).getTime();

////////////////////////////////////////////////////////////
///////////////////////// SVG //////////////////////////////
//////////////////////////////////////////////////////////// 

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

const g = svg.append("g")
  .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

////////////////////////////////////////////////////////////
///////////////////// Axes & Scales ////////////////////////
////////////////////////////////////////////////////////////

var xAxisGroup = g.append("g")
  .attr("class", "x-axis");

var yAxisGroup = g.append("g")
  .attr("class", "y-axis");

//Dynamic
var xScale = d3.scaleTime();

//Fixed
var yScale = d3.scaleLinear()
  .domain([yDomain[0], yDomain[1]])
  .range([height - margin.bottom, 0]);

const xAxis = d3.axisBottom(xScale)
  .ticks(d3.timeSecond.every(1))
  .tickSizeInner(15)
  .tickFormat(d3.timeFormat("%M:%S"));

const yAxis = d3.axisLeft()
  .scale(yScale)
  .tickValues(yTickValues)
  .tickFormat(d3.format(".0f"));

////////////////////////////////////////////////////////////
/////////////////////// Function ///////////////////////////
////////////////////////////////////////////////////////////

function draw() {

  //Update xAxis scale
  xScale.domain([date1, date2])
    .range([0, width]);

  //Call axes
  xAxisGroup.attr("transform", "translate(0," + (height - margin.bottom) + ")")
    .transition().duration(1000)
    .call(xAxis);

  yAxisGroup.call(yAxis);

  date1 += TIME_INTERVAL;
  date2 += TIME_INTERVAL;

};

////////////////////////////////////////////////////////////
///////////////////////// Main /////////////////////////////
////////////////////////////////////////////////////////////

draw();
setInterval(draw, 1000);
.x-axis,
.y-axis {
  font-size: 0.8em;
  stroke-width: 0.06em;
}

#chart {
  width: 600px;
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

标签： javascriptd3.js

解决方案

用于.transition.ease(d3.easeLinear)使整个过渡成为线性体验。这样，根本没有明显的减速。

对于第二部分，我找不到一个好的解决方法，但一个hacky修复是简单地在你想要隐藏的区域上绘制一个白色矩形 - 在这种情况下是左侧。我在添加 -axis 组之前添加了它，y这样它就不会受到它的干​​扰。

////////////////////////////////////////////////////////////
////////////////////// Set-up  /////////////////////////////
////////////////////////////////////////////////////////////

const margin = {
  left: 80,
  right: 80,
  top: 30,
  bottom: 165
};

//Actual graph smaller than svg container 
var width = $('#chart').width() - margin.left - margin.right;
var height = $('#chart').height() - margin.top - margin.bottom;

//yAxis
const yDomain = [0, 70];
const yTickValues = [0, 10, 20, 30, 40, 50, 60, 70];

const TIME_INTERVAL = 1000;

//xAxis domain-> 10 seconds 
const originalTime1 = "1970-01-01T00:00:00",
  originalTime2 = "1970-01-01T00:00:10";

var date1 = new Date(originalTime1).getTime(),
  date2 = new Date(originalTime2).getTime();

////////////////////////////////////////////////////////////
///////////////////////// SVG //////////////////////////////
//////////////////////////////////////////////////////////// 

const svg = d3.select("#chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom);

const g = svg.append("g")
  .attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

////////////////////////////////////////////////////////////
///////////////////// Axes & Scales ////////////////////////
////////////////////////////////////////////////////////////

var xAxisGroup = g.append("g")
  .attr("class", "x-axis");

// HACK: draw white rectangle over the fading axis
g.append('rect')
  .attr('fill', 'white')
  .attr('width', margin.left)
  .attr('height', margin.bottom)
  .attr('x', -margin.left)
  .attr('y', height - margin.bottom);

var yAxisGroup = g.append("g")
  .attr("class", "y-axis");

//Dynamic
var xScale = d3.scaleTime();

//Fixed
var yScale = d3.scaleLinear()
  .domain([yDomain[0], yDomain[1]])
  .range([height - margin.bottom, 0]);

const xAxis = d3.axisBottom(xScale)
  .ticks(d3.timeSecond.every(1))
  .tickSizeInner(15)
  .tickFormat(d3.timeFormat("%M:%S"));

const yAxis = d3.axisLeft()
  .scale(yScale)
  .tickValues(yTickValues)
  .tickFormat(d3.format(".0f"));

////////////////////////////////////////////////////////////
/////////////////////// Function ///////////////////////////
////////////////////////////////////////////////////////////

function draw() {

  //Update xAxis scale
  xScale.domain([date1, date2])
    .range([0, width]);

  //Call axes
  xAxisGroup.attr("transform", "translate(0," + (height - margin.bottom) + ")")
    .transition()
    .duration(1000)

    // See here for the change:
    .ease(d3.easeLinear)
    .call(xAxis);

  yAxisGroup.call(yAxis);

  date1 += TIME_INTERVAL;
  date2 += TIME_INTERVAL;

};

////////////////////////////////////////////////////////////
///////////////////////// Main /////////////////////////////
////////////////////////////////////////////////////////////

draw();
setInterval(draw, 1000);
.x-axis,
.y-axis {
  font-size: 0.8em;
  stroke-width: 0.06em;
}

#chart {
  width: 600px;
  height: 500px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart"></div>

推荐阅读