Question

我正在尝试在圆圈内绘制多个“交叉”符号以用于可视化。我想在'g'标签中绘制十字形，然后应用剪切路径。

是否可以将剪辑路径与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");

Answer 1

你错过了一个亲密的人。而不是

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

应该阅读

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

D3.js - 剪切路径可以与d3.svg.symbol一起使用吗？

1 个答案: