javascript 如何为 d3.js 饼图或圆环图添加阴影
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12277776/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add drop shadow to d3.js pie or donut chart
提问by matt
I am using d3.js to make a simple donut chart.
我正在使用 d3.js 制作一个简单的甜甜圈图。
I'm failing to achieve a drop-shadow or box-shadow effect to add some depth to the chart. I've tried adding the css:
我无法实现阴影或框阴影效果来为图表添加一些深度。我试过添加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;
}
To path tags and the g tags, but to no avail. Does anybody know if this is possible with CSS or know of a wordaround of some sort?
要路径标记和 g 标记，但无济于事。有谁知道这是否可以使用 CSS 或知道某种词法？
Really appreciate the help on such a basic problem. Matt
真的很感谢对这样一个基本问题的帮助。马特
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);
采纳答案by Erik Dahlstr?m
You can use svg filters, here's one exampleshowing how to apply a blur filter.
您可以使用 svg 过滤器，这是一个展示如何应用模糊过滤器的示例。
An example of a dropshadow svg filter can be seen here. Combine the two examples to get what you need.
可以在此处查看dropshadow svg 过滤器的示例。结合这两个示例以获得您需要的内容。
回答by reptilicus
In case anyone comes across this. . .
万一有人遇到这个。. .
/* 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");
Then attach this filter to the svg element, such as a line or bar or whatever else tickles your fancy. . .
然后将此过滤器附加到 svg 元素，例如线或条或任何其他您喜欢的东西。. .
svg.append("path")
.datum(data)
.attr("class", "line")
.attr("d", line)
.attr("filter", "url(#dropshadow)");
回答by codebreaker
In case you need to control the colorof the shadow, this worked for me:
如果您需要控制阴影的颜色，这对我有用：
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:ized from this answer: https://stackoverflow.com/a/25818296/1154787
d3:ized from this answer: https://stackoverflow.com/a/25818296/1154787
回答by djabraham
According to Google's Material Design, a shadow should approximate real world conditions as humans have tremendous capacity for perception. Thus, a shadow should be comprised of an ambient component and a cast component. See Google's specification here..
根据 Google 的 Material Design，阴影应该接近现实世界的情况，因为人类具有巨大的感知能力。因此，阴影应该由环境组件和投射组件组成。在此处查看 Google 的规范..
http://www.google.com/design/spec/what-is-material/environment.html#environment-light-shadow
http://www.google.com/design/spec/what-is-material/environment.html#environment-light-shadow
All of the above are excellent examples of shadows, but I could not find any examples of composite ones, so I though I would share this custom made filter. It does seem to make the end result seem more realistic.
以上都是阴影的极好例子，但我找不到任何复合阴影的例子，所以我想分享这个定制的过滤器。它似乎确实使最终结果看起来更现实。
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");
This can be applied to an object, like so..
这可以应用于对象，就像这样..
var r = element.append("rect")
.attr("class", "element-frame")
: // other settings
.style("filter", "url(#md-shadow)");
回答by Charl Botha
I made you a simple commented example with d3.js of SVG rect graphics with drop shadows, using the information @Erik Dahlstr?m posted: http://bl.ocks.org/cpbotha/5200394:)
我使用 d3.js 的带有阴影的 SVG 矩形图形为您制作了一个简单的注释示例，使用信息@Erik Dahlstr?m 发布：http: //bl.ocks.org/cpbotha/5200394 :)
