Question

我正在尝试根据json中包含的数据计算渐变。在这种情况下，d是json中没有其他子节点的对象（网络的叶子）。我试图使用calculateGradient（d）的返回来为“叶子圆”着色＆＃39;但它似乎没有用。

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); });

我很困惑，好像我要将变量＆＃39; 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传递给函数时，我无法做到这一点。

我真正需要知道的是，是否可以将函数的返回值分配给＆＃34; url（＃...）＆＃34; ？

我试过＆＃34; url（#callateGradient（d））＆＃34;和＆＃34; url（#callateGradient（d）;）＆＃34;尝试了＃des;（＃＆＃34; +计算格拉丁（d）; +＆＃34;）＆＃34;但是无法正常工作:(请帮忙！

Answer 1

这一行：

DialogFragment

只是将渐变设置为该字符串。它对调用该功能没有任何作用。

修复只是调用函数并将填充设置为"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)";
    }
});

链接。

如何使用函数返回的svg渐变？

1 个答案: