2012-06-06 72 views
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"); 

回答

6

您錯過了一個近親。取而代之的

.attr("clip-path", "url(#clipper") 

應改爲

.attr("clip-path", "url(#clipper)")