D3 - 带日期的轴

Question

我在这里有一个 plunker - https://plnkr.co/edit/FOsIWASEDLHhypatomrt?p=preview

它非常基础，我只是想创建轴

数据将采用plunker中的格式

我希望 y 轴从 0 到数据中的最高数字。

x 轴应该是日期。

chart.append('g')
  .classed('x axis', true)
  .attr("transform", "translate(0," + height + ")")
  .call(d3.axisBottom(x)
    .tickFormat(d3.timeFormat("%Y-%m-%d")))

chart.append('g')
  .classed('y axis', true)
  .call(d3.axisLeft(y)
    .ticks(10));  

我不能让任何一个轴工作 - 任何人都可以帮忙

Answer 1

对于您的时间刻度，您需要将字符串转换为日期对象，最简单的方法是将您的刻度定义为：

var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) { 
    return new Date(d.date); 
  }))
  .range([0, width]);

而对于您的 y 轴，问题在于您如何定义比例域。您的数据采用以下格式：

var data = [
   {
      "one":4306,
      "two":2465,
      "three":2299,
      "four":988,
      "five":554,
      "six":1841,
      "date":"2015-05-31T00:00:00"
   },

但是您的规模域设置为：

.domain([0, d3.max(data, function(d){
    return d;
  })

d这是一个对象，具有上面列出的属性。您可以将其设置为这些属性之一的最大值：

.domain([0, d3.max(data, function(d){
    return d.one;
  })

或者稍加修改，达到整体最高：

  .domain([0, d3.max(data, function(d){
    var a = [d.one,d.two,d.three,d.four,d.five,d.six]; // properties to check
    return d3.max(a);  // overall max
    })])

这是一个片段，显示您的轴正在运行：

var x = d3.scaleTime()
  .domain(d3.extent(data, function(d) { 
    return new Date(d.date); 
  }))
  .range([0, width]);

var data = [
   {
      "one":4306,
      "two":2465,
      "three":2299,
      "four":988,
      "five":554,
      "six":1841,
      "date":"2015-05-31T00:00:00"
   },