折线图：当我有 2 个系列的 2 个不同频率时如何设置 xAxis 刻度？

Question

在LineBar.json

[ 
{ 
  "key" : "Data09" , 
  "bar": true,
  "color": "#ccf",
    "values": [[1469440800000, 0]
        , [1469444400000, 0]
        , [1469444400000, 3]
        , [1469448000000, 0]
        , [1469451600000, 0]
        , [1469451600000, 3]
        , [1469455200000, 0]
        , [1469455200000, 5]
        , [1469458800000, 9]
        ]
} , 

{ 
  "key" : "Data34" ,
  "color" : "#333",
  "values" : [[1469440800000, 0], [1469441400000, 0], [1469441400000, 2]
            , [1469442000000, 0], [1469442600000, 0], [1469443200000, 0]
            , [1469443800000, 0], [1469444400000, 0], [1469444400000, 1]
            , [1469445000000, 0], [1469445600000, 0], [1469446200000, 0]
            , [1469446800000, 0], [1469447400000, 0], [1469448000000, 0]
            , [1469448600000, 0], [1469448600000, 1], [1469449200000, 0]
            , [1469449800000, 0], [1469449800000, 1], [1469450400000, 0]
            , [1469450400000, 1], [1469451000000, 0], [1469451600000, 0]
            , [1469452200000, 0], [1469452800000, 0], [1469453400000, 0]
            , [1469453400000, 1], [1469454000000, 0], [1469454600000, 0]
            , [1469454600000, 3], [1469455200000, 0], [1469455200000, 1], [1469455800000, 0]]
}
]

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="../build/nv.d3.js"></script>
<script>
var chart;
d3.json( "lineBar.json", function ( error, data )
{
    nv.addGraph( function ()
    {
        var chart = nv.models.linePlusBarChart()
              .margin( { top: 30, right: 60, bottom: 50, left: 70 } )
              //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
              .x( function ( d, i ) { return i } )
              .y( function ( d, i ) { return d[1]; } )
        ;

        chart.xAxis.tickFormat( function ( d )
        {
            //alert( d + ', ' + data[0].values[d][0] );
            var dx = data[0].values[d] && data[0].values[d][0] || 0;
            //alert( d + ', ' + dx );
            return d3.time.format( '%m/%d %H.%M' )( new Date( dx ) )
        } );

        chart.y1Axis
            .tickFormat( d3.format( ',f' ) );

        chart.y2Axis
            .tickFormat( function ( d ) { return d3.format( ',f' )( d ) } );

        chart.bars.forceY( [0] );

        d3.select( '#chart1 svg' )
          .datum( data )
          .transition()
          .duration( 0 )
          .call( chart );

        nv.utils.windowResize( chart.update );

        return chart;
    } );

} );

</script>

当我运行它时，我的 xAxis 的时间（除了前几个间隔是正确的）都有一个新年前夕的日期（不知道从哪里来的）！所以我将 xAxis 数据访问器从 i 更改为 i/3，它 "improved" 但仍然不行！ (图2)

        var chart = nv.models.linePlusBarChart()
              .margin( { top: 30, right: 60, bottom: 50, left: 70 } )
              //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
              .x( function ( d, i ) { return i/3 } )
              .y( function ( d, i ) { return d[1]; } )
        ;

我已经为这个刻度标记工作了 2 天，非常沮丧以至于我几乎想放弃使用 d3！我需要帮助！

我通过编写此函数获得了那些日期数字 UTC

function toUTC( DD )
{
    var date = new Date( "2017-01-23 21:23:59.999" );
    if ( DD ) date = new Date( DD );

    var yyyy = date.getFullYear();
    var MM = date.getMonth();
    var dd = date.getDate();
    var HH = date.getHours();
    var mm = date.getMinutes();
    var ss = date.getSeconds();
    var ms = date.getMilliseconds();
    var UTC = Date.UTC( yyyy, MM, dd, HH, mm, ss, ms );
    return ( UTC );
};

Answer 1

我找到答案了！！我上面遇到的问题是我使用的是我的时间滴答频率较低的系列！我需要使用更高频率图中的间隔来计算我的时间刻度。

var chart = nv.models.linePlusBarChart()
        .margin( { top: 30, right: 60, bottom: 50, left: 70 } )
        //We can set x data accessor to use index. Reason? So the bars all appear evenly spaced.
        .x( function ( d, i ) { return i } )
        .y( function ( d, i ) { return d[1]; } )
;

chart.xAxis.tickFormat( function ( d ) {
    var dx = data[1].values[d] && data[1].values[d][0] || 0;
    return d3.time.format( '%m/%d %H.%M' )( new Date( dx ) )
} );

折线图：当我有 2 个系列的 2 个不同频率时如何设置 xAxis 刻度？

Line-Bar Chart: how to set the xAxis ticks when I have 2 series of 2 different frequencies?

d3.js

nvd3.js