D3.js:如何相对于x轴反转折线图？

Question

我希望图形以相对于x轴的相反顺序绘制.目前它绘制的值(按顺序):

{'x': '00:37:23', 'y': 8}, {'x': '00:37:46', 'y': 4}, {'x': '00:38:40', 'y': 2} but I want it to plot in the order of {'x': '00:38:40', 'y': 2}, {'x': '00:37:46', 'y': 4}, {'x': '00:37:23', 'y': 8}

我尝试在D3的x轴上查找文档,但似乎没有任何关于逆序的信息.

请参阅:http://jsfiddle.net/sc135zs6/

var data = [{'x': '00:38:40', 'y': 2}, {'x': '00:37:46', 'y': 4}, {'x': '00:37:23', 'y': 8}];
var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%H:%M:%S").parse;

var x = d3.time.scale()
    .range([0, width]);

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .ticks(d3.time.minutes, 2)
    .tickFormat(d3.time.format("%M:%S"));

var yAxis = d3.svg.axis()
    .scale(y)
    .orient("left");

var line = d3.svg.line()
    .x(function(d) { return x(d.x); })
    .y(function(d) { return y(d.y); });

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

data.forEach(function(d) {
    d.x = parseDate(d.x);
    d.y = d.y;
});

x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain(d3.extent(data, function(d) { return d.y; }));

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis)
  .append("text")
  .attr("x", 900)
  .attr("y", -5)
  .attr("dx", ".71em")
  .style("text-anchor", "end")
  .text("Time Remaining");

svg.append("g")
  .attr("class", "y axis")
  .call(yAxis)
  .append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 6)
  .attr("dy", ".71em")
  .style("text-anchor", "end")
  .text("Score Differential");

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line);

谢谢!

Answer 1

反转比例:

var x = d3.time.scale()
        .range([width, 0]);