Javascript D3JS时间格式

我制作了一个平移和缩放图，它从数据库中提取日期，并将它们绘制在X轴上。然后我需要在顶部添加一个折线图，但我很难找出我使用的日期有什么问题

这是我的代码：

/****
  *
  * Set the variables
  *
  ****/

  var totalValues = data.length,
      maxValue = 0,
      maxValueTarget = 0,
      maxConsumption = 0;

  data.forEach(function(d) {

    if (Math.max(d.value, d.target) > maxValue) {
      maxValue = Math.max(d.value, d.target);
    }

    if (Math.max(d.value) > maxConsumption) {
      maxConsumption = Math.max(d.value);
      maxValueTarget = maxConsumption - d.target;
    }

  });

  var dateRange = d3.extent(data, function(d){ 
    console.log('dateRange', d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)));
    return d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)); 
  });

  // Set the margin values for the graph
  var margin = {top: 60, right: 20, bottom: 30, left: 60},
      width = $('.svg-container').width() - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

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

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

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(-height);

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5)
      .tickSize(-width);

  var valueline = d3.svg.line()
    .x(function(d,i) { 
      // console.log('d.date', d.date); 
      // console.log('x .date',x(getDate(d))); 
      console.log('valueline', d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date)));
      return x(d3.time.format("%Y-%m-%d %H:%M%:%S")(new Date(d.date))) 
    })
    .y(function(d) { 
      return y(d.target); 
    });

  var zoom = d3.behavior.zoom()
      .x(x)
      .scaleExtent([-5, 200])
      .on("zoom", zoomed);

  // Set up the svg canvas
  var svg = d3.select(".svg-container svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);

  svg.append("rect")
      .attr("width", width)
      .attr("height", height);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.append("path")    // Add the valueline path.
      .attr("class", "line target-profile")
      .attr("d", valueline(data));

  d3.select("button").on("click", reset);

  function zoomed() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
  }

  function reset() {
    d3.transition().duration(750).tween("zoom", function() {
      var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
          iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
      return function(t) {
        zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
        zoomed();
      };
    });
  }

控制台日志中的示例数据：

Error: Problem parsing d="MNaN,336.85547908946535LNaN,74.44679724722073LNaN,103.31392271042881LNaN,99.19004764425625LNaN,95.71731074642668LNaN,80.95817893065112LNaN,118.94123875066174LNaN,112.64690312334568LNaN,99.62413975648491LNaN,91.37638962413979LNaN,92.67866596082587LNaN,114.6003176283748LNaN,116.7707781895183LNaN,102.8798305982001LNaN,81.17522498676544LNaN,103.09687665431443LNaN,96.15140285865533LNaN,122.19692959237693LNaN,108.95712016940183LNaN,94.84912652196931LNaN,114.38327157226047LNaN,79.87294865007937LNaN,87.25251455796723LNaN,84.64796188459502LNaN,71.62519851773425LNaN,61.64107993647434LNaN,87.90365272631021LNaN,84.21386977236631LNaN,80.08999470619375LNaN,117.6389624139756LNaN,95.50026469031235LNaN,79.22181048173638LNaN,90.07411328745371LNaN,80.30704076230813LNaN,112.64690312334568LNaN,73.14452091053465LNaN,66.85018528321865LNaN,78.35362625727902LNaN,105.05029115934354LNaN,86.38433033350981LNaN,101.36050820539964LNaN,65.76495500264696LNaN,90.50820539968237LNaN,87.46956061408156LNaN,57.73425092641611LNaN,90.29115934356804LNaN,133.48332451032292LNaN,97.67072525145579LNaN,60.9899417681313LNaN,144.98676548438328LNaN,81.17522498676544LNaN,85.73319216516677LNaN,89.85706723133939LNaN,80.95817893065112LNaN,80.08999470619375LNaN,93.98094229751194LNaN,101.79460031762835LNaN,88.12069878242454LNaN,90.29115934356804LNaN,0LNaN,112.4298570672313LNaN,52.95923769190051LNaN,104.83324510322922LNaN,125.01852832186341LNaN,73.36156696664904LNaN,117.42191635786128LNaN,77.9195341450503LNaN,115.46850185283222LNaN,121.97988353626255LNaN,91.59343568025412LNaN,68.36950767601905LNaN,67.50132345156169LNaN,97.23663313922708LNaN,94.41503440974066LNaN,93.76389624139756LNaN,119.59237691900478LNaN,121.11169931180518LNaN,88.98888300688196LNaN,123.28215987294863LNaN,78.35362625727902LNaN,103.5309687665432LNaN,139.5606140815246LNaN,47.53308628904182LNaN,85.08205399682367LNaN,66.41609317098994LNaN,97.01958708311275LNaN,111.3446267866596LNaN,127.40603493912124LNaN,100.70937003705666LNaN,121.11169931180518LNaN,95.71731074642668LNaN,95.50026469031235LNaN,97.23663313922708LNaN,98.32186341979889LNaN,65.33086289041819LNaN,67.06723133933298LNaN,105.05029115934354LNaN,118.2901005823187LNaN,94.84912652196931LNaN,54.04446797247226LNaN,83.12863949179462LNaN,117.20487030174695LNaN,116.11964002117526LNaN,84.43091582848069LNaN,87.25251455796723LNaN,100.49232398094227LNaN,70.5399682371625LNaN,189.48120698782427"

---

如您所见，x.date控制台日志的值总是相同的，因为它看起来好像没有在图形上绘制任何内容。有人能告诉我哪里出了问题吗？

这是我最后使用的代码

我更改了dateRange变量，添加了getDate函数，并使用该函数设置valueline路径的x轴

/****
  *
  * Set the variables
  *
  ****/

  function getDate(d) {
      return d3.time.format("%Y-%m-%d %H:%M:%S").parse(d.date);
  }

  var totalValues = data.length,
      maxValue = 0,
      maxValueTarget = 0,
      maxConsumption = 0,
      dateRange = d3.extent(data, function(d){ return new Date(d.date); });

  data.forEach(function(d) {

    if (Math.max(d.value, d.target) > maxValue) {
      maxValue = Math.max(d.value, d.target);
    }

    if (Math.max(d.value) > maxConsumption) {
      maxConsumption = Math.max(d.value);
      maxValueTarget = maxConsumption - d.target;
    }

  });

  // Set the margin values for the graph
  var margin = {top: 60, right: 20, bottom: 30, left: 60},
      width = $('.svg-container').width() - margin.left - margin.right,
      height = 500 - margin.top - margin.bottom;

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

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

  var xAxis = d3.svg.axis()
      .scale(x)
      .orient("bottom")
      .tickSize(-height);

  var yAxis = d3.svg.axis()
      .scale(y)
      .orient("left")
      .ticks(5)
      .tickSize(-width);

  var valueline = d3.svg.line()
    .x(function(d,i) { 
      return x(getDate(d)); })
    .y(function(d) { return y(d.target); });

  var zoom = d3.behavior.zoom()
      .x(x)
      .y(y)
      .scaleExtent([-5, 200])
      .on("zoom", zoomed);

  // Set up the svg canvas
  var svg = d3.select(".svg-container svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
      .call(zoom);

  svg.append("rect")
      .attr("width", width)
      .attr("height", height);

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis);

  svg.append("path")    // Add the valueline path.
      .attr("class", "line target-profile")
      .attr("d", valueline(data));

  d3.select("button").on("click", reset);

  function zoomed() {
    svg.select(".x.axis").call(xAxis);
    svg.select(".y.axis").call(yAxis);
  }

  function reset() {
    d3.transition().duration(750).tween("zoom", function() {
      var ix = d3.interpolate(x.domain(), [-width / 2, width / 2]),
          iy = d3.interpolate(y.domain(), [-height / 2, height / 2]);
      return function(t) {
        zoom.x(x.domain(ix(t))).y(y.domain(iy(t)));
        zoomed();
      };
    });
  }

---

看起来您需要

d3.time.format（“%Y-%m-%d%H:%m%：%S”）

。我试过了，但没有改变任何东西。我还尝试了各种变体，如

返回d3.time.format（“%Y-%m-%d%H:%m%：%S”）（新日期（d.Date））

但是我得到了解析错误和很多NaN's当你设置

dateRange

时，你也需要这样解析日期。我已经更新了我的代码，以同样的方式解析它们，当控制台记录时，它们看起来完全一样。现在，当设置x轴时，我发现上面的“解析问题”错误。你能提供一个完整的工作示例吗？