0
我正在嘗試在一個圓圈內部繪製多個'cross'符號以供在可視化中使用。我想用'g'標記畫十字,然後應用剪切路徑。D3.js - 剪切路徑可以與d3.svg.symbol一起使用嗎?
是否可以使用剪輯路徑與d3.svg.symbol?
在下面的例子中,svg圈被剪輯路徑正確地屏蔽了;然而十字(代碼的最後部分)不是。
我做錯了什麼或者這不是功能?
var svg = d3.select("#maskingExample")
.append("svg:svg")
.attr("width", 500)
.attr("height", 200);
svg.append("svg:clipPath")
.attr("id", "clipper")
.append("svg:rect")
.style("stroke", "gray")
.style("fill", "black")
.attr("x", 50)
.attr("y", 25)
.attr("width", 300)
.attr("height", 45);
svg.append("g").append("svg:circle")
.style("stroke", "gray")
.style("fill", "blue")
.attr("cx", 175)
.attr("cy", 55)
.attr("r", 50)
.attr("clip-path", "url(#clipper)");
svg.append("g").append("path")
.attr("d", d3.svg.symbol()
.size(function(d) { return 3000; })
.type(function(d) { return d3.svg.symbolTypes[1]; }))
.attr("transform", "translate(150, 50)")
.attr("clip-path", "url(#clipper")
.style("fill", "black");