Question

我正在尝试将径向渐变应用于我的路径。但径向渐变不适用于path。如何解决这个问题。

这是我修改后的代码：

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", 
              "translate(" + margin.left + "," + margin.top + ")");

// Set the ranges
var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

svg.append("linearGradient")                
        .attr("id", "line-gradient")            
        .attr("gradientUnits", "userSpaceOnUse")    
        .attr("x1", 0).attr("y1", y(0))         
        .attr("x2", 0).attr("y2", y(1000))      
    .selectAll("stop")                      
        .data([                             
            {offset: "0%", color: "red"},       
            {offset: "40%", color: "black"},        
            {offset: "62%", color: "black"},        
            {offset: "62%", color: "lawngreen"},    
            {offset: "100%", color: "lawngreen"}    
        ])                  
    .enter().append("stop")         
        .attr("offset", function(d) { return d.offset; })   
        .attr("stop-color", function(d) { return d.color; });

// Add the valueline path.
    svg.append("path")
        .attr("class", "line")
        .attr("d", "M1,5L400,60");

jsfiddle

Answer 1

我发现你的问题在于，你定义了线性渐变的属性。我不确定这段代码的含义是什么意思：

SELECT idno, lastname, firstname, address, CASE table1.idno WHEN <= 50 THEN 'New' ELSE 'Old' END AS MemberStatus

所以我把它改成了：

.attr("x1", 0).attr("y1", y(0))         
.attr("x2", 0).attr("y2", y(55))

这些基本上是渐变在X轴和Y轴上流动的坐标，从应用渐变的元素的（x1，y1）点开始，到（x2，y2）。
D3不理解y（0）和y（1000）坐标，并且没有对路径应用渐变。

我还删除了你的一个颜色偏移，我认为它现在有效。

JSFiddle for that is here

希望这个帮助

d3.js径向渐变不适用于`path`

1 个答案: