関数から返されたsvgグラデーションを使用するにはどうすればよいですか？

Question

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

私は、次の変数」大学院生を割り当てることだったかのように、私が最も混乱しています：

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））"と "url（#calculateGradient（d）;）"を試してみましたが、 "url（＃" + calculateGradient（d）; + "）" ！:(このライン

Answer 1

を助けてください動作するように何かを得ることができません：。

"url(#calculateGradient(d))" 

がちょうどその文字列にグラデーションを設定していることがに何もしない機能を呼び出す

。フィックスは、関数を呼び出して、fillをに設定することです。したがって、グラデーション関数は何も返す必要はありませんが、実際にはその値を使用するつもりはありません。グラデーションとサークルは、グラデーションのidによってリンクされています。