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

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

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

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

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)") но затем первый круг обрезался. Как я могу немного сжать / трансформировать, чтобы и первая, и последняя точки выглядели хорошо, и у меня тоже есть место.

Может кто-нибудь указать, что мне не хватает?

Кодовый ящик здесь - https://codesandbox.io/s/proud-firefly-xy1py

enter image description here

Спасибо ..

Ответы [ 2 ]

2 голосов
/ 26 марта 2020

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

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).

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

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

Решение в https://codesandbox.io/s/vigorous-mcclintock-hsmgu

...