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

Question

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

要求:

我尝试了什么？

fiddle

问题？

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

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

注意事项

我刚刚开始 d3.js。

Answer 1

编辑 - 更改了数据结构和 fiddle 链接以表示开头未填充的 block 。

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

我在下面创建了一个 fiddle 链接来向您展示一个示例。这里的关键是您需要构建数据以包含不应应用红色渐变的百分比。使用上面的示例，我们有三个 block 为红色，其余为未填充。想象一下这样的数据集:

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

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

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

接下来就是创建您的 SVG 元素:

 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 + ")");

然后我们将创建两个渐变来设计饼 block 的样式。所以第一个是线性红色渐变:

// 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");

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

   var g = svg.selectAll(".arc")
     .data(pie(data))
     .enter().append("g")
     .attr("class", "arc");

    // we create a function to append the different chucks of the pie. 
    // we check the pie attribute from the data and apply the correct gradient.

    g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
        if (d.data.pie === 1) {
            console.log('true' + d.data.pie);
            return "url(#gradient)"
        }
        else {
            console.log('false' + d.data.pie);
            return "url(#gradient2)"
        }
    })

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