Блог

Главная - Вопросы по программированию - Использование NVD3.js для построения линейной диаграммы с фокусом. Почему моя панель фокусировки сломана

Использование NVD3.js для построения линейной диаграммы с фокусом. Почему моя панель фокусировки сломана

#javascript #d3.js #nvd3.js

#javascript #d3.js #nvd3.js

Вопрос:

Я пытался следовать примеру линейной диаграммы с фокусом на страницах примеров NVD3, но панель фокусировки не работает, и я не вижу, что я пропустил…

Вот скрипка, которая демонстрирует проблему. Вы можете видеть, что перетаскивание панели фокусировки не фокусирует диаграмму

Вот мой HTML (у меня есть некоторые статические тестовые данные, а внизу генератор тестовых данных со страниц примеров NVD3)

 <!DOCTYPE html>
<html>
<head>
<title>$title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.4.9/d3.js" charset="utf-8"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/nvd3/1.1.15-beta/nv.d3.css"/>

</head>
<body>
  <h1>$title</h1>
  <div id="chart">
    <svg style="height:500px"></svg>
  </div>

  <script>
    //my fake data
    var testData = [
      {
        key: 'expected',
        //values: $expectedData
        values: [
          {x: 0, y: 1},
          {x: 1, y: 2},
          {x: 2, y: 3},
          {x: 3, y: 4},
          {x: 4, y: 5},
        ]
      },
      {
        key: 'actual',
        //values: $actualData
        values: [
          {x: 0, y: 3},
          {x: 1, y: 4},
          {x: 2, y: 5},
          {x: 3, y: 4},
          {x: 4, y: 6},
        ]
      }
    ]
    console.log(genTestData());
    console.log(testData);

    nv.addGraph(function() {
      var chart = nv.models.lineWithFocusChart();

      chart.xAxis
          .tickFormat(d3.format(',f'));

      chart.yAxis
          .tickFormat(d3.format(',.2f'));

      chart.y2Axis
          .tickFormat(d3.format(',.2f'));

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

      nv.utils.windowResize(chart.update);

      return chart;
    });
    /**************************************
     * The data generator for the working test example
     */

    function genTestData() {
      return stream_layers(3,128,.1).map(function(data, i) {
        return { 
          key: 'Stream'   i,
          values: data
        };
      });
    }

    /* Inspired by Lee Byron's test data generator. */
    function stream_layers(n, m, o) {
      if (arguments.length < 3) o = 0;
      function bump(a) {
        var x = 1 / (.1   Math.random()),
            y = 2 * Math.random() - .5,
            z = 10 / (.1   Math.random());
        for (var i = 0; i < m; i  ) {
          var w = (i / m - y) * z;
          a[i]  = x * Math.exp(-w * w);
        }
      }
      return d3.range(n).map(function() {
          var a = [], i;
          for (i = 0; i < m; i  ) a[i] = o   o * Math.random();
          for (i = 0; i < 5; i  ) bump(a);
          return a.map(stream_index);
        });
    }
    function stream_index(d, i) {
      return {x: i, y: Math.max(0, d)};
    }
  </script>
</body>
</html>

Ответ №1:

Скрипта работает по большей части. Очевидно, проблема в том, что если ваш фокус будет содержать менее 2 точек, основная диаграмма будет пустой. Вы заметите, что на странице примера nvd3 есть проблема, но данных достаточно, чтобы намеренно увеличить масштаб до такой степени. (в отличие от вашей скрипки, где есть только 5 точек данных)

Простое обеспечение минимального размера выделения в фокусе, достаточно большого, чтобы охватывать как минимум 2 точки, должно решить ваши проблемы.