Mengapa skala waktu d3 hanya menunjukkan pukul 00:00?

Saya baru mengenal d3 dan saya mencoba melakukan beberapa visualisasi data dengannya. Saya menemukan beberapa contoh tentang cara membuat skala waktu di d3, tetapi ketika saya mengikuti contoh tersebut dan mencoba membuat skala waktu, gagal. Saya frustrasi karena saya tidak tahu di mana kesalahannya... contohnya seperti ini: cara memformat waktu di xAxis menggunakan d3.js

Jadi kode saya seperti ini:

    boxplotdata =[]
    boxplotdata.push(
    {"datetime":"2013-10-30 01:47",length: 500, start:100,deep1_a:130,deep1:50,deep2_a:200,deep2:60,deep3_a:280,deep3:50,deep4_a:350,deep4:60},
    {"datetime":"2013-10-31 01:45",length: 600, start:200,deep1_a:230,deep1:60,deep2_a:300,deep2:60,deep3_a:380,deep3:50,deep4_a:450,deep4:60},
    {"datetime":"2013-11-01 02:11",length: 550,start:150,deep1_a:180,deep1:50,deep2_a:250,deep2:60,deep3_a:350,deep3:50,deep4_a:410,deep4:60},
    {"datetime":"2013-11-02 01:59",length: 500,start:160,deep1_a:190,deep1:80,deep2_a:300,deep2:60,deep3_a:370,deep3:50,deep4_a:430,deep4:60},          
);

//SET MARGIN FOR THE CANVAS
var margin = {top: 30, right: 10, bottom: 10, left: 10},
    width = 960 - margin.left - margin.right,
    height = 600 - margin.top - margin.bottom;

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

//SET X AND Y
var x = d3.time.scale()
    .domain([0,11])
    .range([50, width]);

var y = d3.time.scale()
    .domain([new Date(boxplotdata[0].datetime),d3.time.day.offset(new Date(boxplotdata[boxplotdata.length-1].datetime),1)])
    .rangeRound([20, height-margin.top- margin.bottom]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("top")
    .tickFormat(d3.time.format("%H:%M"))
    //.ticks(d3.time.minutes,15)
    //.tickPadding(8);  

var yAxis = d3.svg.axis()
    .scale(y)
    .orient('right')
    .ticks(d3.time.days,1)
    .tickFormat(d3.time.format('%m-%d'))
    .tickSize(0)
    .tickPadding(8);

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


var w=960,h=1000;



  d3.select("#chart").selectAll("svg").remove(); //Old canvas must be removed before creating a new canvas.
  var svg=d3.select("#chart").append("svg") 
          //.attr("width",w).attr("height",h);            
            .attr("width",w+margin.right+margin.left).attr("height",h+margin.top+margin.bottom) 
            .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");                

boxplotdata.forEach(function(d) {
    d.datetime = parseDate(d.datetime);
});

x.domain(d3.extent(boxplotdata, function(d) { return d.datetime; }));



  bars = svg.selectAll("g")
       .data(boxplotdata)
       .enter()
       .append("g");

beberapa kode gambar di sini..., dan akhirnya:

     svg.append("g")
      .attr("class", "x axis")
      //.attr('transform', 'translate(0, ' + (height - margin.top - margin.bottom) + ')')
      .call(xAxis);

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

Namun, ketika saya mencoba, saya hanya bisa mendapatkan grafik dengan semua waktu di sumbu x ditampilkan sebagai "00:00". Apa yang salah disini? Semoga seseorang dapat membantu saya. Terima kasih!


person Ni Yan    schedule 11.11.2013    source sumber


Jawaban (2)


Contoh data Anda berasal dari hari yang berbeda, jadi yang terjadi di sini adalah D3 memilih nilai yang mewakili (yaitu batas antar hari) dan mencentangnya. Karena format tanggal Anda hanya menampilkan jam dan menit, Anda hanya mendapatkan 00:00.

Pada dasarnya Anda memiliki dua pilihan di sini. Anda bisa mengubah format tanggal untuk menampilkan hari (yang dimaksudkan D3), atau Anda bisa mengatur nilai centang secara eksplisit sesuai keinginan Anda. Untuk yang pertama, Anda bisa menggunakan mis. d3.time.format("%a"). Untuk yang kedua, lihat dokumentasi.

person Lars Kotthoff    schedule 11.11.2013

Hai Anda dapat menggunakan fungsi tickFormat pada sumbu

var xAxis = d3.svg.axis() .scale(x) .orient("bawah") .tickFormat(d3.time.format("%H"));

person abhinavxeon    schedule 06.02.2018