d3.jsのdatetime xaxisを持つ列グラフ

Question

私はd3.jsの初心者で、datetime x軸の列グラフをプロットしようとしていました。誰も私がこのコードの間違いを解消するのを助けることができますか？ご返信ありがとうございます。

var data = [{ 
       "time": "01:00:00", 
       "total": 1 
      }, { 
       "time": "01:05:30", 
       "total": 2 
      }, { 
       "time": "02:10:00", 
       "total": 1 
      }, { 
       "time": "03:15:30", 
       "total": 3 
      }, { 
       "time": "04:25:30", 
       "total": 1 
      }, { 
       "time": "07:55:15", 
       "total": 4 
      }, { 
       "time": "12:18:00", 
       "total": 1 
      }, { 
       "time": "17:00:00", 
       "total": 5 
      }]; 

      var margin = { 
       top: 40, 
       right: 40, 
       bottom: 40, 
       left: 40 
      }, 
      width = 800, 
      height = 500; 

      var today = new Date(); 
      today.setHours(0, 0, 0, 0); 
      var todayMillis = today.getTime(); 

      data.forEach(function(d) { 
       var parts = d.time.split(/:/); 
       var timePeriodMillis = (parseInt(parts[0], 10) * 60 * 60 * 1000) + 
             (parseInt(parts[1], 10) * 60 * 1000) + 
             (parseInt(parts[2], 10) * 1000); 

       d.time = new Date(); 
       d.time.setTime(todayMillis + timePeriodMillis); 
      }); 

      var x = d3.time.scale() 
       .domain(d3.extent(data, function(d) { return d.time; })) 
       .nice(d3.time.day, 1) 
       .rangeRound([0, width - margin.left - margin.right]); 

      var y = d3.scale.linear().range([height - margin.top, margin.bottom]).domain([0, 
        d3.max(data, function (d) { 
        return d.y; 
         }) 
        ]); 

      var xAxis = d3.svg.axis() 
       .scale(x) 
       .orient('bottom') 
       .ticks(d3.time.hour, 2) 
       .tickFormat(d3.time.format('%H:%M')) 
       .tickSize(5) 
       .tickPadding(8); 

      var yAxis = d3.svg.axis() 
       .scale(y) 
       .orient('left') 
       .tickPadding(8) 
       .tickSize(5) 
       .tickSubdivide(true); 

      var svg = d3.select('#plot_container').append('svg') 
       .attr('class', 'chart') 
       .attr('width', width) 
       .attr('height', height) 
       .append('g') 
       .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')'); 

      svg.selectAll('.chart') 
       .data(data) 
       .enter().append('rect') 
       .attr('class', 'bar') 
       .attr('x', function (d) { 
        return x(d.time); 
       }) 
       .attr('y', function (d) { 
        return y(d.total); 
       }) 
       .attr('width', 0) 
       .attr('height', function (d) { 
        return ((height - margin.bottom) - y(d.y)); 
       }) 

      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') 
       .attr('transform', 'translate(' + (margin.left) + ',0)') 
       .call(yAxis); 

Answer 1

あなたのコードでは、いくつかの問題があります。

• ゼロとして定義バーの幅を、
• 未知の値を持つスケール（d.y）。
• バーの高さは、同じ未知の値（d.y）を使用します。
• margin.bottomとmargin.topの位置が間違っています。
• y軸にはtranslateが間違っています。これらの問題を解決する

、ここでのコードは次のとおりです。https://jsfiddle.net/3rsv3d83/2/

あなたはまだ解決するには、いくつかの問題を抱えているが、これはスタートです。