來自d3.scale.category10（）的漸變色在svg圓上有不透明度變化？

Question

我想將color = d3.scale.category10(); var的顏色應用於圓圈svg的漸變，我做錯了什麼？我所看到的是color = d3.scale.category10();（這是藍色）到0％不透明度梯度的第一種顏色，但僅此而已。如果我把梯度出來，然後我看到我想要的範圍從1-4？提前致謝！

var nodes = d3.range(300).map(function() { return {radius: Math.random() * 12 + 4}; }), 
    root = nodes[0], 
    color = d3.scale.category10(); 

root.radius = 0; 
root.fixed = true; 

var force = d3.layout.force() 
    .gravity(0.05) 
    .charge(function(d, i) { return i ? 0 : -4000; }) 
    .nodes(nodes) 
    .size([width, height]); 

    force.start(); 

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

var gradient = svg.append("defs").append("radialGradient") 
    .attr("id", "gradient") 
    .attr("cx", "50%") 
    .attr("cy", "50%"); 

gradient.append("stop") 
    .attr("offset", "75%") 
    .style("stop-color", function(d, i) { return color(i % 4); }) 
    .attr("stop-opacity", "1"); 

gradient.append("stop") 
    .attr("offset", "100%") 
    .style("stop-color", function(d, i) { return color(i % 4); }) 
    .attr("stop-opacity", ".1"); 

svg.selectAll("circle") 
    .data(nodes.slice(1)) 
    .enter().append("circle") 
    .attr("r", function(d) { return d.radius; }) 
    .style("fill", "url(#gradient)"); 

Answer 1

你stop元素沒有與他們加入任何數據，所以在你的function (d, i)，i永遠是0。如果你只是想在兩個站，你可以做這樣的事情：

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

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

相反，如果你只是想淡出你的圈子的邊緣，漸變是不是你想要的所有東西。相反，您需要爲每個圓圈應用純色，然後在蒙版內創建一個單獨的不透明漸變，然後將該蒙版應用於每個圓圈。類似於this：

var defs = svg.append('defs'); 
var gradient = defs.append('radialGradient') 
    .attr('id', 'fadient'); 
gradient.append('stop') 
    .attr('offset', '75%') 
    .attr('stop-color', 'white') 
    .attr('stop-opacity', 1) 
gradient.append('stop') 
    .attr('offset', '100%') 
    .attr('stop-color', 'white') 
    .attr('stop-opacity', .1) 

var mask = defs.append('mask') 
    .attr('id', 'mask') 
    .attr('maskContentUnits', 'objectBoundingBox') 
    .append('circle') 
    .attr('fill', 'url(#fadient)') 
    .attr('cx', .5) 
    .attr('cy', .5) 
    .attr('r', .5) 

svg.selectAll("circle") 
    .data(nodes.slice(1)) 
    .enter().append("circle") 
    .attr('cx', function (d, i) { return 20 * i }) 
    .attr('cy', 50) 
    .attr("r", function(d) { return d.radius; }) 
    .attr('mask', 'url(#mask)') 
    .attr("fill", function (d, i) { return color(i); });