Javascript 用渐变色绘制一个D3圆

如何用渐变色画一个圆？比如说，从黄色到蓝色的渐变

通常，要创建黄色圆圈，我们可以使用以下代码：

var cdata=[50,40];
var xscale=40;
var xspace =50;
var yscale=70;

var svg = d3.select("body")
    .append("svg")
    .attr("width", 1600)
    .attr("height", 1600);

var circle = svg.selectAll("circle")
    .data(cdata)
   .enter()
    .append("circle");

var circleattr = circle
    .attr("cx", function(d) {
        xscale = xscale+xspace;
        return xscale;
    })
    .attr("cy", function(d) {
        yscale=yscale+xspace+10;
        return yscale;
    })
    .attr("r", function(d) {
        return d;
    })
    .style("fill","yellow");

---

您必须首先在SVG中定义渐变，然后用指向渐变元素的SVG链接填充圆圈

// Define the gradient
var gradient = svg.append("svg:defs")
    .append("svg:linearGradient")
    .attr("id", "gradient")
    .attr("x1", "0%")
    .attr("y1", "0%")
    .attr("x2", "100%")
    .attr("y2", "100%")
    .attr("spreadMethod", "pad");

// Define the gradient colors
gradient.append("svg:stop")
    .attr("offset", "0%")
    .attr("stop-color", "#a00000")
    .attr("stop-opacity", 1);

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

// Fill the circle with the gradient
var circle = svg.append('circle')
    .attr('cx', width / 2)
    .attr('cy', height / 2)
    .attr('r', height / 3)
    .attr('fill', 'url(#gradient)');

一个完整的例子。有关如何在中定义SVG渐变的更多详细信息。生成的图像：

---

看一下这个代码片段：

var宽度=500，
高度=500，
padding=1.5，//相同颜色节点之间的间隔
clusterPadding=6，//不同颜色节点之间的分隔
最大半径=12；
var n=200，//节点总数
m=10；//不同簇的数目
var color=d3.scale.category10（）
.域（d3.范围（m））；
//每个群集的最大节点。
var集群=新阵列（m）；
var节点=d3.range（n）.map（函数（）{
var i=数学地板（数学随机（）*m），
r=Math.sqrt（（i+1）/m*-Math.log（Math.random（））*maxRadius，
d={簇：i，半径：r}；
如果（！clusters[i]|（r>clusters[i].radius））clusters[i]=d；
返回d；
});
//使用包布局初始化节点位置。
d3.layout.pack（）
.sort（空）
.尺寸（[宽度、高度]）
.children（函数（d）{返回d.values；}）
.value（函数（d）{返回d.radius*d.radius；}）
.nodes（{值：d3.nest（））
.key（函数（d）{返回d.cluster；}）
.条目（节点）
});
var-force=d3.layout.force（）
.节点（节点）
.尺寸（[宽度、高度]）
重力（.02）
.收费（0）
.on（“滴答”，滴答）
.start（）；
var svg=d3.选择（“正文”）.追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
var grads=svg.append（“defs”）.selectAll（“radialGradient”）
.数据（节点）
.输入（）
.附加（“径向梯度”）
.attr（“gradientUnits”、“objectBoundingBox”）
.attr（“cx”，0）
.attr（“cy”，0）
.attr（“r”，“100%”）
.attr（“id”，函数（d，i）{return“grad”+i；}）；
grads.append（“停止”）
.attr（“偏移量”、“0%”）
.风格（“停止颜色”、“白色”）；
grads.append（“停止”）
.attr（“偏移量”、“100%”）
.style（“停止颜色”，函数（d）{返回颜色（d.cluster）；}）；
var node=svg.selectAll（“圆”）
.数据（节点）
.输入（）
.附加（“圆圈”）
.样式（“填充”，功能（d，i）{
返回“url（#grad“+i+”）；
})
//.style（“fill”，函数（d）{返回颜色（d.cluster）；}）
.呼叫（强制拖动）；
node.transition（）
.持续时间（750）
.delay（函数（d，i）{返回i*5；}）
.attrTween（“r”，函数（d）{
var i=d3.插值（0，d.半径）；
返回函数（t）{returnd.radius=i（t）；}；
});
功能勾号（e）{
节点
.每个（集群（10*e.alpha*e.alpha））
.每个（碰撞（.5））
.attr（“cx”，函数（d）{return d.x；}）
.attr（“cy”，函数（d）{返回d.y；}）；
}
//将d移动到与群集节点相邻的位置。
功能簇（alpha）{
返回函数（d）{
var cluster=簇[d.cluster]；
if（cluster==d）返回；
var x=d.x-cluster.x，
y=d.y-cluster.y，
l=数学sqrt（x*x+y*y），
r=d.radius+cluster.radius；
如果（l！=r）{
l=（l-r）/l*α；
d、 x-=x*=l；
d、 y-=y*=l；
簇x+=x；
簇y+=y；
}
};
}
//解决d和所有其他圆之间的碰撞。
函数碰撞（alpha）{
var四叉树=d3.geom.quadtree（节点）；
返回函数（d）{
var r=d.radius+maxRadius+Math.max（填充，簇填充），
nx1=d.x-r，
nx2=d.x+r，
ny1=d.y-r，
ny2=d.y+r；
四叉树访问（函数（四叉树，x1，y1，x2，y2）{
if（quad.point&&（quad.point！==d））{
var x=d.x-四点x，
y=d.y-四点y，
l=数学sqrt（x*x+y*y），
r=d.半径+四点半径+
（d.cluster===quad.point.cluster？padding:clusterPadding）；
if（lnx2 | x2ny2 | y2