如何在d3.js饼图或圆环图中添加阴影

How to add drop shadow to d3.js pie or donut chart

本文关键字：圆环图 添加 阴影 d3 js      更新时间：2023-09-26

我正在使用d3.js制作一个简单的圆环图。

我没能实现投阴影或框阴影效果来增加图表的深度。我已经尝试添加css：

path {
  -moz-box-shadow:    3px 3px 5px 6px #ccc;
  -webkit-box-shadow: 3px 3px 5px 6px #ccc;
  box-shadow:         3px 3px 5px 6px #ccc;
}

到路径标签和g标签，但没有用。有人知道CSS是否可以做到这一点，或者知道某种文字处理吗？

真的很感激在这样一个基本问题上得到的帮助。马特

var data = [0, 35, 65];
var w = 400,
    h = 400,
    r = Math.min(w, h) / 2,
   ir = r * 0.5,
   color = d3.scale.category20(),
   donut = d3.layout.pie().sort(null),
   arc = d3.svg.arc().innerRadius(ir).outerRadius(r);
var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
   .attr("height", h)
.append("svg:g")
   .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
var arcs = svg.selectAll("path")
    .data(donut(data))
.enter().append("svg:path")
    .attr("fill", function(d, i) { return color(i); })
    .attr("d", arc);

如果有人遇到这个。

 /* For the drop shadow filter... */
  var defs = svg.append("defs");
  var filter = defs.append("filter")
      .attr("id", "dropshadow")
  filter.append("feGaussianBlur")
      .attr("in", "SourceAlpha")
      .attr("stdDeviation", 4)
      .attr("result", "blur");
  filter.append("feOffset")
      .attr("in", "blur")
      .attr("dx", 2)
      .attr("dy", 2)
      .attr("result", "offsetBlur");
  var feMerge = filter.append("feMerge");
  feMerge.append("feMergeNode")
      .attr("in", "offsetBlur")
  feMerge.append("feMergeNode")
      .attr("in", "SourceGraphic");

然后把这个过滤器附加到svg元素上，比如一条线或一条条条，或者其他任何你喜欢的东西。

svg.append("path")
  .datum(data)
  .attr("class", "line")
  .attr("d", line)
  .attr("filter", "url(#dropshadow)");

如果您需要控制阴影的颜色，这对我来说很有效：

var defs = svg.append("defs");
    var filter = defs.append("filter")
        .attr("id", "dropshadow")
    filter.append("feGaussianBlur")
        .attr("in", "SourceAlpha")
        .attr("stdDeviation", 4)
        .attr("result", "blur");
    filter.append("feOffset")
        .attr("in", "blur")
        .attr("dx", 2)
        .attr("dy", 2)
        .attr("result", "offsetBlur")
    filter.append("feFlood")
        .attr("in", "offsetBlur")
        .attr("flood-color", "#3d3d3d")
        .attr("flood-opacity", "0.5")
        .attr("result", "offsetColor");
    filter.append("feComposite")
        .attr("in", "offsetColor")
        .attr("in2", "offsetBlur")
        .attr("operator", "in")
        .attr("result", "offsetBlur");
    var feMerge = filter.append("feMerge");
    feMerge.append("feMergeNode")
        .attr("in", "offsetBlur")
    feMerge.append("feMergeNode")
        .attr("in", "SourceGraphic");

d3:根据这个答案：https://stackoverflow.com/a/25818296/1154787

您可以使用svg过滤器，这里有一个示例显示如何应用模糊过滤器。

这里可以看到一个dropshadowsvg过滤器的例子。把这两个例子结合起来，得到你需要的东西。

我用带有阴影的SVG矩形图形的d3.js为您做了一个简单的注释示例，使用@Erik Dahlström发布的信息：http://bl.ocks.org/cpbotha/5200394：）

根据谷歌的材料设计，阴影应该接近现实世界的条件，因为人类有巨大的感知能力。因此，阴影应该由环境组件和投射组件组成。请参阅此处的谷歌规范。。

http://www.google.com/design/spec/what-is-material/environment.html#environment-光影

上面所有的都是很好的阴影示例，但我找不到任何合成阴影的示例，所以我想我会分享这个定制的过滤器。这似乎确实让最终结果看起来更加现实。

var id = "md-shadow";
var deviation = 2;
var offset = 2;
var slope = 0.25;
var svg = d3.select("#yoursvg");
var defs = svg.select("defs");
// create filter and assign provided id
var filter = defs.append("filter")
    .attr("height", "125%")    // adjust this if shadow is clipped
    .attr("id", id);
// ambient shadow into ambientBlur
//   may be able to offset and reuse this for cast, unless modified
filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", deviation)
    .attr("result", "ambientBlur");
// cast shadow into castBlur
filter.append("feGaussianBlur")
    .attr("in", "SourceAlpha")
    .attr("stdDeviation", deviation)
    .attr("result", "castBlur");
// offsetting cast shadow into offsetBlur
filter.append("feOffset")
    .attr("in", "castBlur")
    .attr("dx", offset - 1)
    .attr("dy", offset)
    .attr("result", "offsetBlur");
// combining ambient and cast shadows
filter.append("feComposite")
    .attr("in", "ambientBlur")
    .attr("in2", "offsetBlur")
    .attr("result", "compositeShadow");
// applying alpha and transferring shadow
filter.append("feComponentTransfer")
    .append("feFuncA")
        .attr("type", "linear")
        .attr("slope", slope);
// merging and outputting results
var feMerge = filter.append("feMerge");
feMerge.append('feMergeNode')
feMerge.append("feMergeNode")
    .attr("in", "SourceGraphic");

这可以应用于对象，比如…

var r = element.append("rect")
    .attr("class", "element-frame")
    :   // other settings
    .style("filter", "url(#md-shadow)");
相关文章：