时间戳

首页 > 解决方案 > d3 图表开箱即用，最后一个圆圈无法正常显示

javascript - 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)")，但第一个圈子被切断了。我怎样才能缩小/变形一点，所以第一点和最后一点看起来都不错，而且我也有一些空间。

有人可以指出我所缺少的吗？

这里的代码沙箱 - https://codesandbox.io/s/proud-firefly-xy1py

在此处输入图像描述

谢谢..

标签： javascriptd3.jssvg

解决方案

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

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

推荐阅读