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 { clip-path: none; }

Answer 2

我遇到了同样的问题并使用

解决了这个问题

.attr("transform", "translate(0,-20)")
.attr("height", height+20)

这个想法有点hacky，但是如果你只是向上移动剪裁窗口并向其高度添加相同的数量，它应该显示（在上面的例子中）在顶部多20px。（对于左侧相同;关于右侧和底侧：只需将一些像素添加到高度/宽度）。

Answer 3

我使用了“变换”，圆圈被切成四分之一。所以使用cx和cy代替，问题解决了..

D3.js剪辑路径切断了我的图形边缘

3 个答案: