我如何使用一个函数返回的svg梯度

How do I use an svg gradient returned by a function?

本文关键字：返回 函数 svg 梯度 一个 何使用      更新时间：2023-09-26

我正试图根据json中包含的数据计算梯度。在这种情况下，D是json中的一个对象，它没有其他子节点(网络的叶子)。我试图使用calculateGradient(d)的返回来为"叶圈"上色，但它似乎不起作用。

function calculateGradient(d){
  var total = d.totalVulnCount;
  var low = (d.vulnCountLow/total * 100);
  var med = (d.vulnCountMed/total * 100);
  var high = (d.vulnCountHigh/total * 100);
  var critical = (d.vulnCountCritical/total * 100)
  var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
           .attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "0%");
        grad.append("stop").attr("offset", low).style("stop-color", "#fdc500");
        grad.append("stop").attr("offset", low).style("stop-color", "#fd8c00");
        grad.append("stop").attr("offset", med).style("stop-color", "#fd8c00");
        grad.append("stop").attr("offset", med).style("stop-color", "#dc0000");
        grad.append("stop").attr("offset", high).style("stop-color", "#dc0000");
        grad.append("stop").attr("offset", med).style("stop-color", "#780000");
        grad.append("stop").attr("offset", high).style("stop-color", "#780000");
//Gradient colors of circles
return grad;
}
var circle = plotWrapper.append("circle")
        .attr("id", "nodeCircle")
        .attr("class", function(d,i) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
        .style("fill", function(d) { return d.children ? colorCircle(d.depth) : "url(#calculateGradient(d))" }) // for the gradient use "url(#grad)" instead of color
        .attr("r", function(d) {
            if(d.ID === "1.1.1.1") scaleFactor = d.value/(d.r*d.r);
            return d.r;
        })
        .on("click", function(d) { if (focus !== d) zoomTo(d); else zoomTo(root); });

我最困惑的是，如果我是分配变量'grad以下:

  var low = 10%;
  var med = 30%;
  var high = 60%;
  var critical = 100%
  var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
           .attr("x1", "0%").attr("x2", "100%").attr("y1", "0%").attr("y2", "0%");
        grad.append("stop").attr("offset", low).style("stop-color", "#fdc500");
        grad.append("stop").attr("offset", low).style("stop-color", "#fd8c00");
        grad.append("stop").attr("offset", med).style("stop-color", "#fd8c00");
        grad.append("stop").attr("offset", med).style("stop-color", "#dc0000");
        grad.append("stop").attr("offset", high).style("stop-color", "#dc0000");
        grad.append("stop").attr("offset", med).style("stop-color", "#780000");
        grad.append("stop").attr("offset", high).style("stop-color", "#780000");

那么使用下面的代码就可以了:

var circle = plotWrapper.append("circle")
        .attr("id", "nodeCircle")
        .attr("class", function(d,i) { return d.parent ? d.children ? "node" : "node node--leaf" : "node node--root"; })
        .style("fill", function(d) { return d.children ? colorCircle(d.depth) : "url(grad)" }) // for the gradient use "url(#grad)" instead of color
        .attr("r", function(d) {
            if(d.ID === "1.1.1.1") scaleFactor = d.value/(d.r*d.r);
            return d.r;
        })
        .on("click", function(d) { if (focus !== d) zoomTo(d); else zoomTo(root); });

但是当我要求变量d传递给函数时，我无法做到这一点。

我真正需要知道的是是否有可能将一个函数的返回值赋值给"url(#…)"吗?

我尝试了"url(#calculateGradient(d))"answers"url(#calculateGradient(d);)"，绝望地尝试了"url(#"+ calculateGradient(d);"+")"，但什么也动不了:(请帮帮我!

这一行:

"url(#calculateGradient(d))"

就是将渐变设置为那个字符串。它对调用函数不做任何事。

修复方法是调用该函数并将填充设置为url(#grad)。所以:

.style("fill", function(d) { 
    if (d.childen){
       return colorCircle(d.depth);
    }else{
       calculateGradient(d); //<-- invoke the function
       return "url(#grad)";
    }
});

顺便说一句，你的梯度函数不需要返回任何东西，你真的不会使用那个值。你的渐变和圆圈由渐变的id连接。

相关文章：