Question

我是d3的新手，我想知道是否可以修复x轴以显示时间/日期。我尝试了1000次，但没有得到任何好的结果。另外，我希望能够使用d3.min，d3.max作为时间参考。我正在回答：错误：属性cx：预期长度“ NaN”。错误：属性x：预期长度“ NaN”。

一切正常。

这是我要修复的代码：https://plnkr.co/edit/pgOUWxgEpEgjBa6X4Rxv?p=preview

这是代码的一部分：

//var x = d3.time.scale();
//c.x.domain([d3.time.hour(new Date(1950,0,1,0,0,0)), d3.time.hour(new Date(2016,0,2,0,0,0)),])
//[new Date(2013, 2, 28), new Date(2013, 3, 2)]
//c.x.domain([d3.min(players, function(d) { return minDate; }),
//d3.max(players, function(d) { return maxDate; })])
//.xAxis.tickValues(ideas.values.map( function(d){return d.x;} ) );
//.orient("bottom").tickFormat(d3.time.format("%Y"));
//c.x.d3.time.scale();

<script>
var players = [
  {
    "name": "task1",
    "start": "2016-03-05 09:00:00",
    "stop": "2016-03-08 10:00:00"
  },
  {
    "name": "task2",
    "start": "2016-03-10 10:00:00",
    "stop": "2016-03-25 10:00:00"
  },
  {
    "name": "task3",
    "start": "2016-03-12 10:00:00",
    "stop": "2016-03-28 07:00:00"
  },
  {
    "name": "task4",
    "start": "2016-03-03 05:20:00",
    "stop": "2016-03-17 10:00:00"
  },
  {
    "name": "task5",
    "start": "2016-03-15 10:00:00",
    "stop": "2016-03-21 10:00:00"
  },
  {
    "name": "task6",
    "start": "2016-03-22 10:00:00",
    "stop": "2016-03-25 12:00:00"
  },
  {
    "name": "task7",
    "start": "2016-03-01 10:00:00",
    "stop": "2016-03-28 12:00:00"
  },
  {
    "name": "task8",
    "start": "2016-03-25 10:00:00",
    "stop": "2016-03-31 22:30:00"
  }
]

players = _.sortBy(players, 'start')
players.forEach(function(d){ d.years = [] })
//  players.forEach(function(d){ d.date = parseDate(d.date) })

var parseDate = d3.time.format("%Y-%m-%d %X").parse;


d3.time.day.range(new Date(2016, 2, 0), new Date(2016, 2, 31)).forEach(function(year){
    var currentHeight = 0
    players.forEach(function(d){
        if (parseDate(d.start) <= year && year <= parseDate(d.stop)){
            d.years.push({year: year, height: ++currentHeight})
            if (parseDate(d.stop)  == year) d.stopHeight  = currentHeight
            if (parseDate(d.start) == year) d.startHeight = currentHeight

        }
    })
})

var c = d3.conventions({height: 220})

c.x.domain([new Date(2016, 2, 0), new Date(2016, 2, 31)])
c.y.domain([0, 15])

c.yAxis.ticks(3)

c.drawAxis()

var line = d3.svg.line()
        .x(ƒ('year', c.x))
        .y(ƒ('height', c.y))

d3.js没有正确显示x轴

0 个答案: