Функциональность Bru sh в моем графике d3 не работает должным образом - PullRequest
Новая
       2

Функциональность Bru sh в моем графике d3 не работает должным образом

0 голосов
/ 18 марта 2020

Моя реализация функции Bru sh & Zoom в моей линейной диаграмме d3 не работает должным образом,

Я перешел по этой ссылке - https://bl.ocks.org/EfratVil/92f894ac0ba265192411e73f633a3e2f,

Проблемы, с которыми я сталкиваюсь, -

диаграмма не показывает все значения, у меня есть 4 данных, но она показывает только 3 данных. Нажатием на точку я показываю прямоугольник, который не перемещается с помощью bru sh функциональность незначительная вещь, но диаграмма всегда выходит из коробки

Мой код песочница - https://codesandbox.io/s/proud-firefly-xy1py

Может кто-нибудь указать, что я делаю неправильно? спасибо.

[1]: https://i.stack.imgur.com/lamzH.png

Пожалуйста, подскажите, что я делаю не так, спасибо.

1 Ответ

1 голос
/ 18 марта 2020

Ваша первая точка идет за вашей clip областью. Например, если вы щелкните правой кнопкой мыши на первом видимом круге и осмотрите элемент, вы увидите, что все 4 элемента круга присутствуют в DOM. Первый элемент круга находится за осью.

Это означает, что вы должны переместить свой сюжет вправо. К сожалению, при кодировании диаграммы вы не добавили элемент g для основной диаграммы, а затем добавили круги и путь к этому элементу g. В результате это должно быть сделано в нескольких местах.

Сначала мы корректируем путь клипа следующим образом: 

   svg
      .append("defs")
      .append("SVG:clipPath")
      .attr("id", "clip")
      .append("SVG:rect")
      .attr("width", containerWidth)
      .attr("height", height)
      .attr("x", 40)
      .attr("y", 0);

Затем мы корректируем ваши круги 

    scatter
      .selectAll(".foo")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "foo")
      .attr("transform", "translate(40,0)")

, а затем линию 

    scatter
      .append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line)
      .attr("transform", "translate(40,0)");

Вам придется учитывать этот 40 px перевод для других ваших элементов. Хотя мне тяжело разрушать твои svg. Я думаю, что это должно дать вам идею, хотя. Проверьте, совпадает ли ось с временными точками.

Установите флажок с песком кода

Обновите

Чтобы сделать прямоугольники двигаясь с помощью bru sh, вам нужно будет добавить код в вашу функцию brushed const, чтобы пересчитать x, y, ширину и высоту с использованием обновленных масштабов.

Update2

Пройдя через коды и поля, представленные в комментариях, я смог добавить код для обновления прямоугольников до константы brushed, как показано ниже, чтобы заставить ренты также перемещаться с помощью кисти: 

      // update rectangles
      scatter
        .selectAll(".rect-elements")
        .attr("x", d => {
          console.log(d);
          return xScale(d.startTime) - 12.5;
        })
        .attr("y", 0)
        .attr("width", 24)
        .attr("height", height + 5);

Полный рабочий код Песочница.

...