Диаграмма d3 выходит из коробки, последний круг не подходит

Моя Диаграмма выходит из коробки. Если вы заметили, что последний круг обрезается и выходит за пределы описанной ширины, я попытался выполнить преобразование, но оно выглядит не очень хорошо,

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

scatter
      .selectAll(".foo")
      .data(data)
      .enter()
      .append("circle")
      .attr("class", "foo")
      .attr("transform", "translate(50,0)")
      .attr("cx", function(d) {
        return xScale(d.startTime);
      })

Я пытался дать .attr("transform", "translate(50,0)") но затем первый круг .attr("transform", "translate(50,0)") . Как я могу немного сжиматься / трансформироваться, чтобы и первая, и последняя точки выглядели хорошо, и у меня тоже есть место.

Может кто-то указать, что я пропускаю?

Код песочницы здесь - https://codesandbox.io/s/proud-firefly-xy1py

введите описание изображения здесь

Спасибо..

Всего 2 ответа


Похоже, ширина пути клипа является проблемой:

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

В настоящее время он имеет ту же ширину, что и ваш общий контейнер SVG, когда он должен быть шириной области клипа диаграммы (т. containerWidth - margin.left - margin.right ). Он смещен слева от .attr("x", 40) поэтому он по-прежнему обрезает линию и круги слева, но это означает, что он выходит за правый край SVG на 40 пикселей, поэтому он ничего не обрезает справа боковая сторона.

Попробуйте изменить .attr("width", containerWidth) на .attr("width", width) .


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

Решение находится на https://codesandbox.io/s/vigorous-mcclintock-hsmgu


Есть идеи?

10000