3

multibarchartinnvd3.jsは次のJSON形式の入力を期待していることを確認しました。

[
  {
    "key": "abcd",
    "values": [
      {
        "x": 1221578789000,
        "y": 40
      },
      {
        "x": 1222578789000,
        "y": 103
      },
      {
        "x":1224181799000,
        "y": 35
      }
    ]
  }
]

しかし、私はDateTimestampでxラベルを持ちたいです。'x'はint/longデータ型のみである必要がありますか？

nvd3.jsそうは言っても、コード内で長いデータ型を日付のタイムスタンプに変換しようとしました。

nv.models.axis = function() {    
  {code block}
  switch (axis.orient()) {
    case 'bottom':
      {code block}
      if (showMaxMin) {
      //if (showMaxMin && !isOrdinal) {
        var axisMaxMin = wrap.selectAll('g.nv-axisMaxMin')
            //.data(scale.domain())
            .data([scale.domain()[0], scale.domain()[scale.domain().length - 1]]);
        axisMaxMin.enter().append('g').attr('class', 'nv-axisMaxMin').append('text');
        axisMaxMin.exit().remove();
        axisMaxMin.attr('transform', function(d,i) {
            return 'translate(' + (scale(d) +
                    (isOrdinal ? scale.rangeBand() / 2 : 0)) + ',0)'
          })
          .select('text')
          .attr('dy', '.71em')
          .attr('y', axis.tickPadding())
          .attr('transform', function(d,i,j) {
             return 'rotate('+ rotateLabels + ' 40,60)'
          })
          .attr('text-anchor', rotateLabels ? (rotateLabels%360 > 0 ?
                                               'start' : 'end') : 'middle')
          .text(function(d,i) {
            **var dat = new Date(d);**                  
            **return dat.toUTCString();**
            //return v;
          });

          d3.transition(axisMaxMin)
            .attr('transform', function(d,i) {
              //return 'translate(' + scale.range()[i] + ',0)'
              //return 'translate(' + scale(d) + ',0)'
              return 'translate(' + (scale(d) + (isOrdinal ?
                                scale.rangeBand() / 2 : 0)) + ',0)'
          });
      }
   }
}

この変更により、MaxMin'xラベル'を日時スタンプに変換できるようになりました。しかし、目盛りラベルに対して同じ変換を行う場所を見つけることができません（「最小x」軸と「最大x」軸の間のラベルは、長い値自体を表示しています）。

4

1 に答える 1

4

チャート オブジェクトに必要な変更を加えることで、問題は解決しました。

var chart = nv.models.multiBarChart();

chart.xAxis
    .showMaxMin(true)
    .rotateLabels(440)
    .tickFormat(function(d) {
                     return d3.time.format('%x')(new Date(d))
                   });
于 2012-12-19T06:23:23.060 に答える