javascript - d3 图表即将开箱即用，最后一个圆圈未正确显示

Question

我的图表即将开箱即用，如果您注意到最后一个圆圈正在切割并超出所描述的宽度， 我尝试过进行变换，但看起来不太好，

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

谢谢..

Answer 1

看来您的剪辑路径的宽度是问题所在:

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 的右边缘 40px，因此它不会剪切右侧的任何内容。

尝试将 .attr("width", containerWidth) 更改为 .attr("width", width)。