在 d3.js 圆圈中添加阴影效果答案

【问题标题】：Adding drop shadow effects in d3.js circle在 d3.js 圆圈中添加阴影效果
【发布时间】：2016-09-06 10:05:36
【问题描述】：

我想为 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)");

但是阴影是矩形的，我的圆圈不断移动，里面有一个文本标签。

【问题讨论】：

我似乎找不到一种方法来模糊一个圆圈，因为它最终会调整圆圈周围的空白区域。我知道这不是一个解决方案，但也许一个低不透明度的灰色圆圈会解决这个问题？示例：jsfiddle.net/thatOneGuy/0nv4ck58/1

标签： javascript css d3.js svg

【解决方案1】：

这里是工作代码 sn-p。希望这会有所帮助。

来自here。

var svg = d3.select("svg");
var defs = svg.append("defs");


var dropShadowFilter = defs.append('svg:filter')
  .attr('id', 'drop-shadow')
  .attr('filterUnits', "userSpaceOnUse")
  .attr('width', '250%')
  .attr('height', '250%');
dropShadowFilter.append('svg:feGaussianBlur')
  .attr('in', 'SourceGraphic')
  .attr('stdDeviation', 2)
  .attr('result', 'blur-out');
dropShadowFilter.append('svg:feColorMatrix')
  .attr('in', 'blur-out')
  .attr('type', 'hueRotate')
  .attr('values', 180)
  .attr('result', 'color-out');
dropShadowFilter.append('svg:feOffset')
  .attr('in', 'color-out')
  .attr('dx', 3)
  .attr('dy', 3)
  .attr('result', 'the-shadow');
dropShadowFilter.append('svg:feBlend')
  .attr('in', 'SourceGraphic')
  .attr('in2', 'the-shadow')
  .attr('mode', 'normal');


var data = [{
  sentiment: 5,
  x: 100,
  y: 200,
  radius: 5
}, {
  sentiment: 10,
  x: 250,
  y: 250,
  radius: 15
}];

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', "blue")
  .style("filter", "url(#drop-shadow)");

svg {
  background: white;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg width=500 height=500 />

【讨论】：

【解决方案2】：

这可能是您的过滤器尺寸需要更大（记住默认尺寸是 120% 宽度/高度。）尝试类似：

var filter = defs.append("filter")
    .attr("id", "drop-shadow")
    .attr("width", "300%")
    .attr("height", "300%");

【讨论】：