d c. js - отображать значения фильтра в виде меток на кисти

Question

Может кто-нибудь сказать мне, как настроить bru sh для отображения значений фильтра в виде меток?

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

Answer 1

Это отличный вопрос, и я удивлен, что никто не задавал этого раньше. Очевидно, что d c. js может отображать значения фильтра в тексте над графиком, но поставить его прямо на bru sh действительно здорово!

Любой d c. js диаграмма позволит вам прослушать событие pretransition и нарисовать свои собственные аннотации, используя D3.

Давайте сделаем это:

  chart.on('pretransition', function(chart) {
    let brushBegin = [], brushEnd = []; // 1
    if(chart.filter()) {
      brushBegin = [chart.filter()[0]]; // 2
      brushEnd = [chart.filter()[1]];
    }
    let beginLabel = chart.select('g.brush') // 3
      .selectAll('text.brush-begin')
      .data(brushBegin); // 4
    beginLabel.exit().remove(); // 5
    beginLabel = beginLabel.enter()
      .append('text') // 6
      .attr('class', 'brush-begin') // 7
      .attr('text-anchor', 'end')
      .attr('dominant-baseline', 'text-top')
      .attr('fill', 'black')
      .attr('y', chart.margins().top)
      .attr('dy', 4)
      .merge(beginLabel); // 8
    beginLabel
      .attr('x', d => chart.x()(d))
      .text(d => d.toFixed(2)); // 9
    let endLabel = chart.select('g.brush')
      .selectAll('text.brush-end')
      .data(brushEnd);
    endLabel.exit().remove();
    endLabel = endLabel.enter()
      .append('text')
      .attr('class', 'brush-end')
      .attr('text-anchor', 'begin')
      .attr('dominant-baseline', 'text-top')
      .attr('fill', 'black')
      .attr('y', chart.margins().top)
      .attr('dy', 4)
      .merge(endLabel);
    endLabel
      .attr('x', d => chart.x()(d))
      .text(d => d.toFixed(2));
  })

Это похоже на много кода; это действительно делает то же самое дважды, один раз для каждого лейбла. Давайте посмотрим, как отображается первая метка.

1. D3 связывает данные массива с элементами. Мы свяжем метки в начале и конце bru sh каждая с массивом нуля (bru sh скрыто) или одного элемента (показан bru sh). В этой строке массивы по умолчанию пусты.
2. Если активен фильтр, мы установим массивы в одноэлементные массивы, содержащие начальное и конечное значения bru sh.
3. Стандартный шаблон D3: выберите родительский элемент (d.brush), затем выберите элементы, которые мы хотим создать, обновить или уничтожить, а затем
4. Привязать массивы с нулем или одним элементом к выборкам
5. Если bru sh был просто скрыт, удалите метку
6. Если bru sh только что был показан, добавьте метку
7. и инициализируйте ее с необходимыми атрибутами SVG и класс brush-begin, который мы только что использовали в связывании. Большинство этих атрибутов предназначены для получения правильной позиции метки.
8. Объединение выделенных элементов, поэтому теперь у нас есть вставка + изменение выделения
9. Примените атрибут положения X и меняйте текст при каждом изменении bru sh изменения.

https://jsfiddle.net/gordonwoodhull/w4xhv8na/33/

Получение белого цвета на черные метки на самом деле не тривиальны , но я надеюсь вернуться к этому позже.