NVD3時間格式，與焦點圖線

Question

我使用了一個非常簡單的nvd3線與焦點圖的例子。 myData從我的php文件返回一個JSON對象，其中的x座標是0-23的數字。我想知道如何以小時格式格式化x軸。

d3.json('get_data.php', function (error, myData) { 
    // Renders a line chart 
    (function() { 
     nv.addGraph(function() { 
      var chart = nv.models.lineWithFocusChart(); 
      chart.xAxis     
      .tickFormat(d3.format('')); 
      chart.yAxis 
      .tickFormat(d3.format('')); 
      chart.y2Axis 
      .tickFormat(d3.format('')); 

      d3.select("#chart svg")    
       .datum(myData) 
       .transition().duration(500) 
       .call(chart); //Define transition and pass the d3.selection to our lineChart. 


      nv.utils.windowResize(chart.update); 

      return chart; //Must return the enclosed chart variable so the global rendering queue can store it. 
      //}); 
     }); 
    })(); }); 

這裏是myData樣品JSON數據。無論如何我需要操縱它嗎？

[{ "key": "data", "values": [ { "x": 0, "y": 408175 }, { "x": 1, "y": 428739 }, { "x": 2, "y": 422141 }, { "x": 3, "y": 439864 }, { "x": 4, "y": 441409 } ] }] 任何幫助表示讚賞。

Answer 1

經過大量的搜索得到它與這段代碼一起工作。

chart.lines.xScale(d3.time.scale()); chart.lines2.xScale(d3.time.scale());

var tickMultiFormat = d3.time.format.multi([ ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour ["%-I%p", function(d) { return d.getHours(); }], // not midnight ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st ["%Y", function() { return true; }] ]);

chart.xAxis.tickFormat(function (d) { return tickMultiFormat(new Date(d)); });

Answer 2

繼我沒有工作。 chart.lines.xScale（d3.time.scale（））; chart.lines2.xScale（d3.time.scale（））;

在最新的nvd3中，您必須使用以下來更新xScale。 012.xchart.xScale（d3.time.scale（））; chart.focus.xScale（d3.time.scale（））;

希望它可以幫助別人。

Answer 3

也是我對角版本的解決方案：

var tickMultiFormat = d3.time.format.multi([ 
      ["%-I:%M%p", function(d) { return d.getMinutes(); }], // not the beginning of the hour 
      ["%-I%p", function(d) { return d.getHours(); }], // not midnight 
      ["%b %-d", function(d) { return d.getDate() != 1; }], // not the first of the month 
      ["%b %-d", function(d) { return d.getMonth(); }], // not Jan 1st 
      ["%Y", function() { return true; }] 
     ]); 


$scope.fraud_cases_area_options = { 
      chart: { 
       type: 'lineWithFocusChart', 
       height: 300, 
       noData: $scope.noDataMessage || 'No Data Available.', 
       margin: { 
        top: 20, 
        right: 20, 
        bottom: 30, 
        left: 40 
       }, 
       color: ['#d62728', '#5DB56A', '#9E9E9E', '#aec7e8'], 
       x: function (d) { 
        "use strict"; 
        return d[0]; 
       }, 
       y: function (d) { 
        "use strict"; 
        return d[1]; 
       }, 
       xScale: d3.time.scale(), 
       focus: { 
        xScale: d3.time.scale(), 
       }, 
       useVoronoi: false, 
       clipEdge: true, 
       duration: 100, 
       useInteractiveGuideline: true, 
       showControls: false, 
       showTotalInTooltip: true, 
       xAxis: { 
        showMaxMin: false, 
        tickFormat: function (d) { return tickMultiFormat(new Date(d)); } 
        /*function (d) { 
         "use strict"; 
         return d3.time.format("%d.%m.%Y")(new Date(d)) 
        }*/, 
       }, 
       x2Axis: { 
        showMaxMin: false, 
        tickFormat: /*function (d) { return tickMultiFormat(new Date(d)); }*/ 
        function (d) { 
        "use strict"; 
        return d3.time.format("%d.%m.%Y")(new Date(d)) 
        }, 
       }, 
       yAxis: { 
        tickFormat: function (d) { 
         "use strict"; 
         // console.log("error",d3.format(',.2f')(d)); 
         return d3.format(',.0f')(d); 
        } 
       }, 
       zoom: { 
        enabled: false, 
        scaleExtent: [1, 10], 
        useFixedDomain: false, 
        useNiceScale: false, 
        horizontalOff: false, 
        verticalOff: true, 
        unzoomEventType: 'dblclick.zoom' 
       }, 
       interactiveLayer: { 
        "tooltip": { 
         "duration": 0, 
         "gravity": "w", 
         "distance": 25, 
         "snapDistance": 0, 
         "classes": null, 
         "chartContainer": null, 
         "enabled": true, 
         "hideDelay": 0, 
         "fixedTop": null, 
         "headerEnabled": true, 
         "headerFormatter": function (d) { 
          return 'at ' + d3.time.format("%-I:%M%p")(new Date(d)); 
         }, 

         "hidden": true, 
         "data": null, 
        }, 
        "margin": { 
         "left": 0, 
         "top": 0 
        }, 
        "width": null, 
        "height": null, 
        "showGuideLine": true, 
        "svgContainer": null 
       }, 
      } 
     }