D3 аннотации в неправильном месте вдоль оси х - PullRequest
Новая
       82

D3 аннотации в неправильном месте вдоль оси х

1 голос
/ 12 апреля 2020

Я использую замечательные аннотации плагина d3 и с трудом пытаюсь выяснить, почему мои аннотации расположены в неправильной области вдоль моей оси x. Я использую шкалу времени, чтобы определить диапазон моей оси, и я использую то же самое для аннотаций, но почему-то это не работает. Я следовал тому же процессу, что и в документации (https://bl.ocks.org/susielu/23dc3082669ee026c552b85081d90976).

annotations in the wrong place

Масштаб X: 

 const xScale = d3
.scaleTime()
.domain(d3.extent(data, xAccessor))
.range([0, dimensions.boundedWidth])
.nice();

Аннотации: 

    const annotations = [
    {
      note: {
        label: 'National emergency is declared',
        align: 'center',
        wrap: 100,
      },
      subject: {
        y1: dimensions.margin.top + 40,
        y2: dimensions.height - dimensions.margin.bottom,
      },
      y: dimensions.height - dimensions.boundedHeight,
      data: { x: dateParser('2020-3-13') }, // position the x based on an x scale
    },
    {
      note: {
        label: `Florida's stay at home rule is declared`,
        align: 'right',
        wrap: 120,
      },
      subject: {
        y1: dimensions.margin.top + 40,
        y2: dimensions.height - dimensions.margin.bottom,
      },
      y: dimensions.height - (dimensions.boundedHeight - 10),
      data: { x: dateParser('2020-4-1') },
    },
  ];

  const type = d3.annotationCustomType(d3.annotationXYThreshold, {
    note: {
      lineType: 'none',
      orientation: 'top',
    },
  });

  // 12 - render the annotations
  const makeAnnotations = d3
    .annotation()
    .type(type)
    .accessors({
      x(d) {
        return xScale(d.x);
      },
      y(d) {
        return yScale(d.y);
      },
    })
    .annotations(annotations)
    .textWrap(30);

  wrapper
    .append('g')
    .attr('class', 'annotation-group')
    .call(makeAnnotations);

1 Ответ

0 голосов
/ 12 апреля 2020

Если вы посмотрите на свой dataviz, обе аннотации отключены (слева) на одну и ту же сумму. Размещенного вами кода недостаточно, чтобы увидеть, что происходит, но поскольку у вас есть это в качестве диапазона шкалы ... 

.range([0, dimensions.boundedWidth])

... Держу пари, вы добавляете ось и другие элементы в группы который переводится на сумму слева, установленную вами при добавлении аннотаций к другой группе (внутри wrapper, что бы это ни было), который не переводится на ту же сумму.

При этом решения являются:

  1. Добавить аннотации к той же (переведенной) группе, в которую вы поместили ось;

  2. Установить диапазон шкалы с полем ... 

    .range([leftMargin, dimensions.boundedWidth - leftMargin - rightMargin])

    ... и затем добавить все в непереведенную группу.

...