10

x 軸は、日付の数が限られている場合に日付を繰り返すのが好きです。このフィドルを見てください：

http://jsfiddle.net/skilesare/bFfJ2/1/

nv.addGraph(function() {  

    var data = fakeActivityByDate();

    var chart = nv.models.lineChart();




chart.xAxis
       .axisLabel('Date')
       .rotateLabels(-45)
       .tickFormat(function(d) { return d3.time.format('%b %d')(new Date(d)); });

   chart.yAxis
       .axisLabel('Activity')
       .tickFormat(d3.format('d'));

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

   nv.utils.windowResize(function() { d3.select('#chart svg').call(chart) });

   return chart;
 });

function days(num) {
  return num*60*60*1000*24
}
 /**************************************
  * Simple test data generator
  */

function fakeActivityByDate() {
   var lineData = [];
   var y=0;
   var start_date = new Date() - days(365); // one year ago

   for (var i = 0; i < 4; i++) {
     lineData.push({x: new Date(start_date + days(i)), y: y});
     y=y+Math.floor((Math.random()*10)-3);
   }

   return [
     {
       values: lineData,
       key: 'Activity',
       color: '#ff7f0e'
     }
   ];
 }`

画面の幅が十分に広い場合、日付が繰り返されて表示されます。ウィンドウを絞ると、問題はなくなります。

4

2 に答える 2

5

この問題は、次のような場合にも発生する可能性があるため、画面サイズには関係ありません。表示するのに3日しかなく、3ティックの代わりに6または10またはその他のものを取得します（実際、私があなたのjsfiddleを見てください）。nvd3 が次のようなものを使用して目盛りの寸法を設定することは事実です (axis.js を見てください)。

if (ticks !== null)
    axis.ticks(ticks);
 else if (axis.orient() == 'top' || axis.orient() == 'bottom')
    axis.ticks(Math.abs(scale.range()[1] - scale.range()[0]) / 100);

この問題にはいくつかの解決策があります。

  • 独自の軸コンポーネントを実装して、nvd3 の軸を置き換えます。

  • nvd3 の軸コンポーネントを直接変更し、説明しているこのシナリオに特に使用されるいくつかの設定を追加します (nvd3 は高度にカスタマイズ可能であることに気付くでしょう)。

  • ハック: d3独自のtickValues()を使用し、画面に表示する日付の配列を渡します (例: アルゴリズムによって計算された最初の日付、最後の日付、およびその間のいくつかの日付)。d3 のドキュメントを参照してください: https://github.com/mbostock/d3/wiki/SVG-Axes#wiki-tickValues。ケース (変更する軸とグラフ) に応じて、貼り付けたコードにコメントを付けて、tickValues を設定するアルゴリズムをグラフ コンポーネント (例えば lineChart) に追加するだけでなく、追加する必要があります。 tickValues のセッターを作成し、値を自分の値で上書きします。

于 2013-02-10T19:20:06.813 に答える
2

遅い返信ですが、他の人に役立つかもしれません。回避策を使用して、既に適用されているティックと d3 のマルチフォーマット指定子の配列を維持することにより、重複するティックを排除します。

    uniqueTicks = [];
    xTickFormat = d3.time.format.multi([
                                        ["%Y", function (d) {
                                        // If tick not applied yet                                            
                                        if (uniqueTicks.indexOf(d.getFullYear()) === -1) {
                                                uniqueTicks.push(d.getFullYear());
                                                return true;
                                            } else {
                                                return false;
                                            }                                        
                                        }],
                                        ["", function () {
                                            return true;
                                        }]
                                    ]);

    d3.svg.axis().tickFormat(xTickFormat );

このトリックは、他のタイプのティック フォーマットでも微調整できます。

于 2015-06-09T07:42:10.453 に答える