7

私はこの種のフォーラムに不慣れで、私の英語力は最高ではありませんが、最善を尽くします:)。

nvd3のWebサイトに、ビューファインダーを使用した折れ線グラフの例があります。これは、過去2日間に使用したもの（examples \ lineWithFocusChart.html、nvd3 zipパッケージ）です。例の形式に変更を加えたのは1つだけです。つまり、正規数の代わりにX軸の日付を使用します。

これが私の2つの質問です：

1- x軸のすべての目盛りのラベルを回転させるにはどうすればよいですか？日付が長すぎます（％x％X、曜日と時刻）。表示を改善するために、日付を順番に回転させてください。2ティックしか回転できません（x軸の最大値と最小値、エッジ）。これは、nv.d3.jsの「switch（axis.orient（））」ブロック内で変更するコードです。

case 'bottom':
      axisLabel.enter().append('text').attr('class', 'axislabel')
          .attr('text-anchor', 'middle')
          .attr('y', 25);
      axisLabel
          .attr('x', scale.range()[1] / 2);
      if (showMaxMin) {
        var axisMaxMin = wrap.selectAll('g.axisMaxMin')
                       .data(scale.domain());
        axisMaxMin.enter().append('g').attr('class', 'axisMaxMin').append('text');
        axisMaxMin.exit().remove();
        axisMaxMin
            .attr('transform', function(d,i) {
              return 'translate(' + scale(d) + ',0)'
            })
          .select('text')

            .attr('dy', '.71em')
            .attr('y', axis.tickPadding())
            .attr('text-anchor', 'middle')
            .text(function(d,i) {
              return ('' + axis.tickFormat()(d)).match('NaN') ? '' : axis.tickFormat()(d)
            })
            .attr('transform', 'rotate(45)')
            ;
        d3.transition(axisMaxMin)
            .attr('transform', function(d,i) {
              return 'translate(' + scale.range()[i] + ',0)'
            });
      }
      break;

確認できるように、新しい属性として.attr（'transform'、'rotate（45）'）を配置したため、最大ティックと最小ティックが回転します（axisMaxMin）。xティックに関連付けられていると思われる他のテキスト要素を使用して（nv.d3.jsファイル全体で）この方法を試しましたが、機能しません。何か案が？すべてのXラベルを回転させて表示するには、どこに変換を配置する必要がありますか？

2-この例では、マウスを線の上に置くと、ポイントに関連付けられた値（x、y）を表示するイベントはトリガーされません。これらの値を表示するにはどうすればよいですか？これらの値が表示されている他の例で使用されているメソッドをコピーして貼り付けようとしましたが、機能しません。何か案が？

あなたの時間と知識を共有してくれてありがとう：D。

4

1 に答える 1

32

最近nvd3が更新され、x軸の目盛りラベルを非常に簡単に回転できるようになりました。これで、整数を取り、xTickラベルを指定された度数だけ回転させるrotateLabels（degrees）と呼ばれる軸モデルの関数があります。すべてのxTickラベルを45度後ろに回転させるには、次のように使用できます。

var chart = nv.models.lineChart();
chart.xAxis.rotateLabels(-45);
于 2012-08-03T22:16:07.073 に答える