Question

我已开始使用d3.js。我有以下要求

要求：

我尝试了什么？

fiddle

问题？

如何实现与上图相同的渐变。

任何建议或想法都将不胜感激。

注意

我刚开始d3.js。

Answer 1

编辑 - 更改了数据结构和小提琴链接以在开头表示未填充的块。

我会使用d3中的pie函数来创建饼图。上面的图像基本上是一个饼图，其中两个不同的渐变样式应用于饼图块。红色线性渐变和黑/白径向渐变。

我在下面创建了一个小提琴，向您展示一个例子。这里的关键是您需要构建数据，以包括不应该应用红色渐变的百分比。使用上面的例子，我们有三个红色的块，其余的未填充。想象一下这样的数据集：

faa(bar);

所以我们有百分比，我们还使用pie属性标记哪些块应该是红色的，哪个块应该是未填充的部分。

您可以使用您希望的任何数据集，但我只是以此为例。

接下来就是创建你的SVG元素：

    var data = [{
    percent: 10,
    pie: 0
}, {
    percent: 13,
    pie: 1
}, {
    percent: 13,
    pie: 1
}, {
    percent: 6,
    pie: 1
}, {
    percent: 56,
    pie: 0
}];

然后我们将创建两个渐变来设置饼图块的样式。所以第一个是线性红色渐变：

 var width = 400;
    var height = 400;
    var radius = Math.min(width, height) / 2;

    var arc = d3.svg.arc()
     .outerRadius(radius - 10)
     .innerRadius(((radius - 10) / 5) * 4);


    var pie = d3.layout.pie()
    .sort(null)
    .value(function (d) { return d.percent });

    var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    .append("g")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

然后我们为未填充的部分附加径向渐变。这个是一个小小的琐事，因为我们需要通过变换移动渐变来获得正确的径向中心。如果你把它翻译成宽度和高度的一半，我认为它应该可以解决。

// append a defs tag to SVG, This holds all our gradients and can be used
//by any element within the SVG we append it to
var defs = svg.append("svg:defs")

//next we append a linear gradient 
var red_gradient = defs.append("svg:linearGradient")
  .attr("id", "gradient")
  .attr("x1", "0%")
  .attr("y1", "0%")
  .attr("x2", "0%")
  .attr("y2", "100%")
  .attr("spreadMethod", "pad");

//first dark red color
    red_gradient.append("svg:stop")
        .attr("offset", "0%")
        .attr("stop-color", "rgb(221,48,2)")
        .attr("stop-opacity", 1);
//second light red color
    red_gradient.append("svg:stop")
        .attr("offset", "100%")
        .attr("stop-color", "rgb(247, 78, 1)")
        .attr("stop-opacity", 1);

设置渐变后，我们可以添加饼图：

var radial_gradient = defs.append("radialGradient")
.attr("gradientUnits", "userSpaceOnUse")
.attr("cx", '50%')
.attr("cy", '50%')
.attr("r", "75%")
.attr("fx", '50%')
.attr("fy", '50%')
.attr('gradientTransform', "translate(-200,-200)")
.attr("id", 'gradient2');
 radial_gradient.append("stop").attr("offset", "0%").style("stop-color", "black");
 radial_gradient.append("stop").attr("offset", "55%").style("stop-color", "white");
 radial_gradient.append("stop").attr("offset", "95%").style("stop-color", "black");

JSFiddle：http://jsfiddle.net/staceyburnsy/afo292ty/2/

如何使用d3.js绘制渐变弧？

要求：

我尝试了什么？

问题？

注意

1 个答案: