我正在尝试使用带有d3.js的svg-clippath和缩放行为。 以下代码创建一个矩形,然后由矩形剪裁区域剪切。
<svg class="chart"></svg>
<script>
var width = 800;
var height = 600;
var svg = d3.select(".chart")
.attr("width", width)
.attr("height", height)
.append("g");
var clip = svg.append("defs")
.append("clipPath")
.attr("id","clip")
.append("rect")
.attr("width",200)
.attr("height",200)
.attr("x",100)
.attr("y",100);
var zoom = d3.behavior.zoom().
on("zoom",zoomed);
function zoomed(){
container.attr("transform", "translate(" + d3.event.translate
+")scale(" + d3.event.scale + ")");
container.attr("clip-path","url(#clip)");
}
svg.call(zoom);
var container = svg.append("g")
.attr("clip-path","url(#clip)");
var rect = container.append("rect")
//.attr("clip-path","url(#clip)")
.attr("class","bar")
.attr("x",150)
.attr("y",150)
.attr("width",350)
.attr("height",350);
</script>
我想要的是在缩放/移动后再次应用剪辑(所以我不能 将矩形移出剪切区域,现在我可以毫无问题地进行操作。)我该怎么做?
我假设当前的行为是由在转换之前应用裁剪的事实引起的。
答案 0 :(得分:3)
我遇到了同样的问题,花了最后几个小时试图找出解决方案。显然,剪辑路径在之前对象上进行转换。所以我在执行缩放转换时尝试反向转换剪辑对象,这很有效!
这符合以下精神:
var clip_orig_x = 100, clip_orig_y = 100;
function zoomed() {
var t = d3.event.translate;
var s = d3.event.scale;
// standard zoom transformation:
container.attr("transform", "translate(" + t +")scale(" + s + ")");
// the trick: reverse transform the clip object!
clip.attr("transform", "scale(" + 1/s + ")")
.attr("x", clip_orig_x - t[0])
.attr("y", clip_orig_y - t[1]);
}
其中clip是clipPath中的矩形。由于缩放和翻译之间的相互作用,您需要设置&#34; x&#34;和&#34; y&#34;显式而不是使用变换。
我相信有经验的d3程序员会提出更好的解决方案,但这样做有效!