3

d3.js を使用して、x 軸に時間スケールを使用すると、新しい月の境界で主要な目盛りが台無しになることがわかりました。前のティックに近すぎるティックが発生したとしても、新しい月に新しいティック マークが作成されるように見えます。これにより、軸に沿った等間隔が台無しになるだけでなく、目盛りラベルが重なり合って見栄えが悪くなります。

質問の下部にあるデモを参照して、私の意味を確認してください (右にスクロールして問題の領域を確認してください)。

このケースを処理するには、カスタムのマルチスケール時間形式が必要ですか? または、ここで見逃しているオプションはありますか? (そして、これはバグと見なされますか?)

編集:カスタムのマルチタイム形式を試してみましたが、余分なラベルを「6月」から他のラベルに合わせて変更することはできますが、本来あるべきではない場所に表示されます。問題は、そこに目盛りがまったくないことです。常にそこにあったティック間の同じ 2 日間の間隔を維持する必要がありますが、そうではありません。私はこれをバグと呼ぶことに傾いています。

これが発生するデモは次のとおりです。

<!DOCTYPE html>
    <meta charset="utf-8">
    <style>
      body {
        font: 12px Arial;
      }
      path {
        stroke: steelblue;
        stroke-width: 2;
        fill: none;
      }
      .axis path, .axis line {
        fill: none;
        stroke: grey;
        stroke-width: 1;
        shape-rendering: crispEdges;
      }
    </style>
    <body>
      <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>
      <script type="text/javascript">
        var data = {
            "values" : [40, 80, 94, 95, 10, 81, 89, 70, 43, 56, 86, 72, 39, 38, 84, 5, 0, 38, 68, 16, 23, 6, 45, 7, 79, 59, 51, 33, 44, 18],
            "labels" : ["2013,05,07", "2013,05,08", "2013,05,09", "2013,05,10", "2013,05,11", "2013,05,12", "2013,05,13", "2013,05,14", "2013,05,15", "2013,05,16", "2013,05,17", "2013,05,18", "2013,05,19", "2013,05,20", "2013,05,21", "2013,05,22", "2013,05,23", "2013,05,24", "2013,05,25", "2013,05,26", "2013,05,27", "2013,05,28", "2013,05,29", "2013,05,30", "2013,05,31", "2013,06,01", "2013,06,02", "2013,06,03", "2013,06,04", "2013,06,05"]
        };
    
        var margin = { top : 15, right : 15, bottom : 40, left : 50 },
            width = 750 - margin.left - margin.right,
            height = 250 - margin.top - margin.bottom;
    
        // Parse dates
        data.parsedDates = [];
        data.labels.forEach(function(d) {
            var parsed = d3.time.format("%Y,%m,%d").parse(d);
            data.parsedDates.push(parsed);
        });
    
        var x = d3.time.scale()
            .range([0, width])
            .domain(d3.extent(data.parsedDates));
    
        var y = d3.scale.linear()
            .range([height, 0])
            .domain(d3.extent(data.values));
    
        var xAxis = d3.svg.axis().scale(x)
            .ticks(8).tickSize(5, 0, 0);
    
        var line = d3.svg.line()
            .x(function(d,i) {
                return x(data.parsedDates[i]); })
            .y(function(d,i) {
                return y(d); });
    
        // Create chart
        var svg = d3.select("body")
            .append("svg")
                .attr("width", width + margin.left + margin.right)
                .attr("height", height + margin.top + margin.bottom)
            .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
        // Graph points
        svg.append("path")
          .datum(data)
          .attr("class", "line")
          .attr("d", function(d) { return line(d.values) });
    
        // Add the X Axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis);
      </script>
    </body>

4

1 に答える 1