Question

我是D3.js的新手，并尝试了解D3.js中的渐变填充。我，遵循本教程

http://bl.ocks.org/mbostock/1086421

它的工作就像一个魅力。

我只需要有人向我解释这段代码中发生的事情：

var gradient = svg.append("defs")


 .append("linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

gradient.append("stop")
    .attr("offset", "0%")
    .attr("stop-color", "#0c0")
    .attr("stop-opacity", 1);

gradient.append("stop")
    .attr("offset", "100%")
    .attr("stop-color", "#c00")
    .attr("stop-opacity", 1);

svg.append("rect")
    .attr("width", width)
    .attr("height", height)
    .style("fill", "url(#gradient)");

据我所知，我们使用def标签定义渐变。但我需要了解其余部分到底发生了什么。

1） - 附加什么标签＆＃34; linearGradient＆＃34;必须做。这是一个有效的HTML标签还是我们可以创建一些其他标签？

2） - 什么是speadMethod，＆＃34; pad＆＃34;做什么？这是什么类型的？

3） - 最后这里有什么补偿？什么是停止颜色和停止不透明度？

用简单的术语解释会很棒，这样我就可以根据自己的需要改变颜色的不透明度。

Answer 1

所有代码都在预先存在的<svg>元素上执行工作。第一个语句将<defs>元素添加到svg元素（see more here），随后的gradient.append语句添加由#gradient标识的线性渐变的细节，可以重复使用。最后一个语句创建一个<rect> svg元素，并使用这个新创建的线性渐变定义将#gradient def应用于它。

D3.js理解渐变填充

1 个答案: