我想在d3.js圆形中添加阴影,我已经成功做到这一点,但阴影是矩形而不是圆形。
我添加阴影的方式
var defs = svg.append("defs");
// create filter with id #drop-shadow
// height=130% so that the shadow is not clipped
var filter = defs.append("filter")
.attr("id", "drop-shadow")
.attr("height", "130%");
// SourceAlpha refers to opacity of graphic that this filter will be applied to
// convolve that with a Gaussian with standard deviation 3 and store result
// in blur
filter.append("feGaussianBlur")
.attr("in", "SourceAlpha")
.attr("stdDeviation", 5)
.attr("result", "blur");
// translate output of Gaussian blur to the right and downwards with 2px
// store result in offsetBlur
filter.append("feOffset")
.attr("in", "blur")
.attr("dx", 5)
.attr("dy", 5)
.attr("result", "offsetBlur");
// overlay original SourceGraphic over translated blurred opacity by using
// feMerge filter. Order of specifying inputs is important!
var feMerge = filter.append("feMerge");
feMerge.append("feMergeNode")
.attr("in", "offsetBlur")
feMerge.append("feMergeNode")
.attr("in", "SourceGraphic");
var nodes = svg.selectAll("circle")
.data(data);
nodes.enter().append("circle")
.attr("class", function (d, i) { return " circle_"+d.sentiment+" circle_"+i})
.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.x; })
.attr("r", function (d) { return d.radius; })
.style('fill', function(d) {
return colors["sentiment"][d["sentiment"]];
})
.style("filter", "url(#drop-shadow)");
但是阴影是矩形的,我的圆圈一直在移动,并带有一个内部文本标签。