1

我已经在 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)");

有任何想法吗？非常感谢您的帮助，因为我完全不知道在这里做什么！

4

3 回答 3

2

如果您不希望在悬停时不应用剪辑，您可以使用如下样式规则：

circle:hover { clip-path: none; }

于 2012-10-08T15:26:51.683 回答
1

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

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

这个想法有点老套，但如果你只是向上移动剪辑窗口并将相同的数量添加到它的高度，它应该在顶部显示（在上述情况下）20px。（左侧相同；关于右侧和底部：只需在高度/宽度上添加一些像素）。

于 2013-10-14T17:35:15.453 回答
0

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

于 2014-02-27T01:07:21.613 回答