Я рисую диаграммы с помощью d3.js.
Можно ли добавить радиальные градиенты к кольцевой диаграмме, как на этом рисунке?
SVG Добавление радиального градиента к кольцевой диаграмме
Ответы (1)
Предполагая, что части дуги являются заполненными элементами пути, вы можете использовать радиальный градиент, чтобы получить этот результат.
См. этот аналогичный вопрос, мы можем повторно использовать пример, чтобы получить:
var dataset = {
apples: [53245, 28479, 19697, 24037, 40245],
};
var width = 460,
height = 300,
radius = Math.min(width, height) / 2;
var color = d3.scale.category20();
var pie = d3.layout.pie()
.sort(null);
var arc = d3.svg.arc()
.innerRadius(radius - 100)
.outerRadius(radius - 50);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var grads = svg.append("defs").selectAll("radialGradient").data(pie(dataset.apples))
.enter().append("radialGradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", 0)
.attr("cy", 0)
.attr("r", "100%")
.attr("id", function(d, i) { return "grad" + i; });
grads.append("stop").attr("offset", "15%").style("stop-color", function(d, i) { return color(i); });
grads.append("stop").attr("offset", "20%").style("stop-color", "white");
grads.append("stop").attr("offset", "27%").style("stop-color", function(d, i) { return color(i); });
var path = svg.selectAll("path")
.data(pie(dataset.apples))
.enter().append("path")
.attr("fill", function(d, i) { return "url(#grad" + i + ")"; })
.attr("d", arc);
Jsfiddle: http://jsfiddle.net/X8hfm/
person
Erik Dahlström
schedule
17.02.2014
хорошее решение, вчера я сделал то же самое на чистом svg jsfiddle.net/Gf3w8/5 а>
- person Ifozest; 18.02.2014
This
может вам помочь. - person Unknown User   schedule 17.02.2014