Масштабирование мыши не работает для линейной диаграммы dc.js - PullRequest
Новая
       37

Масштабирование мыши не работает для линейной диаграммы dc.js

1 голос
/ 11 июня 2019

Я создаю оболочку Angular для библиотеки dc.js . Я внимательно следил за аннотированным источником , чтобы получить несколько примеров работы, и у меня был некоторый успех с круговыми и строковыми диаграммами. Мне удалось заставить работать линейный график, и я могу выбирать области с помощью кисти. Я, однако, не могу увеличить. Я отключил кисть и включил масштабирование мыши.

При наведении на график и перемещении колеса прокрутки другие диаграммы на странице реагируют, поэтому фильтры вступают в силу . Когда я выбираю кусок пирога, он фильтрует график:

enter image description here

enter image description here

В документации я заметил, что есть событие zoomed. Я не вижу никакого использования .on('zoomed', ...) в аннотированном источнике, но результирующий линейный график очень четко (и чисто) поддерживает масштабирование. Я не уверен, что мне нужно реализовать прослушиватель для переопределения домена масштабируемой диаграммы домена при увеличении. Если это так, я не совсем уверен, как получить самые низкие и самые большие значения для этого нового домена.

EDIT: Гордон Вудхалл заявил (в комментариях), что функция масштабирования основана на d3-zoom, поэтому нет необходимости прослушивать zoomed события и пересчитывать домен.

Также посмотрите, как создаются диаграммы в моей оболочке. Компоненты диаграмм содержат <div>, который он дает dc.js для размещения диаграммы. Компонент диаграммы принимает в качестве входных данных модель ChartSettings для настройки диаграммы перед ее отображением. Компонент, который показывает диаграмму, будет, таким образом, делать следующее: 

<dc-chart [settings]="priceChart"></dc-chart>

Компонент Chart сам использует настройки (которые определяют тип), чтобы определить соответствующий объект диаграммы dc.js для экземпляра. Затем компонент использует сервис, реализующий перекрестный фильтр, для извлечения измерения и группы для желаемого домена и диапазона (указанных в заданных настройках). Используя настройки и ответ службы, компонент настраивает диаграмму: 

let applicableMixins = {
  baseMixin: true, // The base mixin applies to all dc.js charts
  colorMixin: true, // The color mixin applies to all dc.js charts
  coordinateGridMixin: ["bar", "line", "bubble"].indexOf(cS.type) >= 0,
  marginMixin: ["row", "bar", "line", "bubble"].indexOf(cS.type) >= 0,
  // TODO: bubbleMixin
  // TODO: capMixin
  // TODO: stackMixin
}

let c = this.chart;
// Note: All chart settings are assigned default values in chart-settings.model, so there's no
// need to set default values here. All properties in a ChartSettings object are defined.
// Base Mixin
c.height( cS.height ); // fills parent when null
c.width( cS.width );
c.dimension(this.latestReceipt.dimension);
c.group(this.latestReceipt.group);

// Color Mixin
c.colors(d3.scaleOrdinal(d3.schemeCategory10));

// Coordinate Grid Mixin
if(applicableMixins.coordinateGridMixin) {
  c.brushOn(false);
  c.elasticX(cS.elasticX);
  c.x(cS.xScale); // d3.scaleTime().domain([new Date(1985, 1, 1), new Date(1986, 4, 1)])
  c.round(d3.timeMonth.round); // from example
  c.xUnits(d3.timeMonths); // from example
  c.renderArea(cS.renderArea); // true
  c.mouseZoomable(true);

  // Override for example.
  c.width(990);
  c.height(200);

  c.elasticY(cS.elasticY); // true
  c.renderHorizontalGridLines(true);
  c.renderVerticalGridLines(false);
  c.zoomScale([0, 100]);
  c.zoomOutRestrict(false);
  c.margins({
    top: 30, right: 50, bottom: 25, left: 40
  });
}

В попытке заставить работать масштабирование я максимально подражал аннотированному источнику. Я использую сгенерированные данные, которые имитируют стоимость акции, которая немного более многословна, чем данные, используемые в примере главной страницы dc.js. 

[
    {
        "open": 110.47,
        "high": 115.16,
        "low": 104.79,
        "close": 117.0982,
        "date": "01/01/1985",
        "quarter": 1,
        "isGain": true,
        "dayOfWeek": "Tue"
    },
    {
        "open": "117.10",
        "high": 120.58,
        "low": 117.03,
        "close": 124.126,
        "date": "01/02/1985",
        "quarter": 1,
        "isGain": true,
        "dayOfWeek": "Wed"
    },
    {
        "open": "124.13",
        "high": 128.31,
        "low": 116.28,
        "close": 119.16479999999999,
        "date": "01/03/1985",
        "quarter": 1,
        "isGain": false,
        "dayOfWeek": "Thu"
    },
    ...
    {
        "date": "04/01/1986",
        ...
    }
]

1 Ответ

1 голос
/ 12 июня 2019

Через некоторое время мы выяснили, что проблема в том, что elasticX не совместим с mouseZoomable, так как он постоянно блокирует домен масштаба x для полного диапазона значений в данных.

Чтобы разрешить mouseZoomable(true), вам нужно убедиться, что elasticX неверно.

Конечно, это также означает, что вам нужно самостоятельно вычислить домен шкалы Х, что немного раздражает. Может быть, dc.js должен «эластить» домен X только один раз (при рендеринге), если установлены обе опции. Это было бы удобно и, вероятно, то, что ожидается.

...