4

Flask で NVD3 を使用しており、x 軸に日付があります。ここに画像の説明を入力

ご覧のとおり、x 軸の線は点と一致しません。x軸に日、月、年、時間を出力します。日付が等間隔でない理由がわかりません。つまり、x 軸のデータが同じであっても「時間」が同じではないため、線が「24 時間」以上離れています。これが問題を引き起こしていると思います。

（編集済み）私のコードは次のとおりです。

nv.addGraph(function() {
                        var chart = nv.models.lineChart();
                        chart.xAxis
                            .tickFormat(function(d) { return d3.time.format('%d %b %Y')(new Date(parseInt(d))) }
                );
                        chart.yAxis
                            .tickFormat(d3.format(',.02f'));
                        chart.tooltipContent(function(key, y, e, graph) {
                            var x = d3.time.format('%d %b %Y')(new Date(parseInt(graph.point.x)));
                            var y = String(graph.point.y);
                var y = String(graph.point.y);
                            tooltip_str = '<center><b>'+key+'</b></center>' + y + ' on ' + x;
                            return tooltip_str;
                        });
                        chart.showLegend(true);

                        d3.select('#lineChart svg')
                            .datum(data_lineChart)
                            .transition().duration(500)
                            .attr('width', 1200)
                .attr('height', 450)
                            .call(chart);

                    nv.utils.windowResize(chart.update);
                    return chart;
                });
4

3 に答える 3

10

タイムスケールが宣言されていない場合、d3 は日付で表される x 軸を適切にスケーリングしないため、ここでのより良い提案です。

  chart.xAxis
      .tickFormat(function(d) {
          return d3.time.format('%d-%m-%y')(new Date(d))
      });

  chart.xScale(d3.time.scale()); //fixes misalignment of timescale with line graph
于 2014-03-08T09:26:26.463 に答える
4

はい、わかった！私がしていることは、x 軸のデータとして使用されるタイムスタンプの並べ替えられたリストを作成し、それらを最も近い日に丸めることです。次に、次のようにして、自動生成された間隔ではなく、このデータを間隔として使用するように NVD3 に強制します。

 chart.xAxis
     .tickValues({{x_data}})

x_data はリストです。そして出来上がり！...

間隔を揃えてプロットする

于 2013-11-01T00:47:43.493 に答える
0

ティックの生成方法を明示的に制御できます。ティックを 24 時間間隔で行うには、コードは次のようになります。

chart.xAxis.ticks(d3.time.day, 1);

編集

NVD3 は実際には D3 軸コンポーネントを使用してラベルを生成していないように見えるため、これはすべて効果がありません。必要なものを実現するには、NVD3 のソースを変更する必要があります。

于 2013-10-30T18:10:32.773 に答える