d3图表开箱即用，最后一个圆环未正确显示 [英] d3 chart is going out of the box, last circle is not coming properly

问题描述

我的图表"开箱即用，如果您注意到最后一个圆圈在切开并超出了所描述的宽度， 我试图进行转换，但是效果不好，

My Chart is going out of the box, If you notice last circle is cutting and going out of the described width, I have tried to give transform but it's not looking good,

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)")，但随后第一个圆圈中断了. 我如何缩小/变换一点，以便使第一点和最后一点都看起来不错，并且我还有一些空间.

I tried to give .attr("transform", "translate(50,0)") but then first circle was cutting off. How I can shrink/transform a little so both the first and last points looks good and i have some space as well.

有人可以指出我想念的东西吗?

Can someone point what I am missing ?

此处为代码沙箱- https://codesandbox.io/s/proud-firefly- xy1py

谢谢..

推荐答案

在richardwestenra提供的答案的评论中进行讨论之后，我们提出了另一种解决方案，该解决方案在许多方面将margin.right从width减少了可以使绘图显示在绘图区域内的地方，而不是被剪切路径剪切的地方.

After discussion in the comments provided for answer by richardwestenra, we came up with an alternative solution which reduces the margin.right from the width in a number of places to make the plot appear within the drawing area and not be clipped by the clip path.

该解决方案位于 https://codesandbox.io/s/vigorous-mcclintock-hsmgu

这篇关于d3图表开箱即用，最后一个圆环未正确显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！