我正在使用d3.js制作一个简单的甜甜圈图。
我试图添加drop-shadow或box-shadow效果来为图表增加一些深度,但未成功。我已经尝试添加以下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;
}
我尝试过将CSS应用于路径标签和g标签,但没有成功。有人知道是否可以使用CSS实现这一点,或者是否知道某种解决方法吗?
非常感谢对这个基本问题的帮助。 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);