Question

我是d3的新手，我正在尝试用它做一些数据可视化。我找到了一些关于如何在d3中创建时间刻度的示例，但是当我按照示例并尝试创建时间刻度时，它失败了。我很沮丧，因为我无法弄清楚它出错的地方......示例是这样的： how to format time on xAxis use d3.js

所以我的代码是这样的：

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

这里的一些绘图代码......，最后：

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

但是，当我尝试时，我只能在xAxis上显示所有时间的图表，显示为“00:00”。这里出了什么问题？希望有人可以帮助我。谢谢！

Answer 1

您的示例数据来自不同的日期，因此这里发生的是D3正在挑选代表值（即天数之间的界限）并为此做出嘀嗒声。由于您的日期格式仅显示小时和分钟，因此您可以获得00:00。

这里基本上有两种选择。您可以更改日期格式以显示天数（这是D3的意图），或者您可以明确地将滴答值设置为您想要的任何值。首先，您可以使用例如d3.time.format("%a")。对于第二个，请参阅the documentation。

Answer 2

您好您可以在轴上使用tickFormat函数

var xAxis = d3.svg.axis（） .scale（x）的。东方（＆＃34;底部＆＃34） .tickFormat（d3.time.format（＆＃34;％H＆＃34））;

为什么d3时间刻度只显示我00:00？

2 个答案: