javascript - D3.js 剪辑路径切断了我的图表的边缘

Question

我已经在 D3.js 可缩放焦点和上下文图上设置了一个剪辑路径，但有一个小问题。 http://nestoria.darkgreener.com/v2/

剪辑路径从焦点图的边缘切掉了一些圆圈 - 您会看到顶部和右侧的圆圈只有一半!

不过，它在缩放时效果很好，如果您单击并拖动上下文图，您会看到这一点。

所以我不确定如何创建不切断这些圆圈边缘的剪辑路径。这是我的代码:

focus.append("defs")
  .append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width - 200)
  .attr("height", height);
var focus_dots = focus
  .selectAll(".dot")
  .data(mydata[j].data);
focus_dots.enter()
  .append("circle")
  .attr("clip-path", "url(#clip)");

有什么想法吗？非常感谢您的帮助，因为我对在这里做什么完全感到困惑!

Answer 1

如果您不想在悬停时不应用剪裁，您可以使用这样的样式规则:

circle:hover { 剪辑路径:无； }