노드 값에 기초한 d3 대각선에 대한 그래디언트 사용

Question

노드 값을 기반으로하는 그래디언트 사용법을 이해하려고합니다. "핑크"-> "노랑"과 같은 임의의 색상을 기반으로 그래디언트를 수행하는 방법을 알아 냈습니다. 그러나 대각선 그래디언트가 소스 및 대상 노드를 기반으로하는 값에서 이동하는 방법을 파악하려고합니다. 내 프로젝트는 마이크 bostock의 "Collapsible Tree"를 기반으로합니다 : http://bl.ocks.org/mbostock/4339083

여기에 관련 코드가 있습니다. 나는 이것을 어떻게하는지를 고심하고 낮은 것으로 보았다. 난에서 갈 수있는 그라디언트를 얻기 위해 변화의 수를 시도했습니다

function epochColor(d) { 
    var blueRed = d3.scale.linear() 
    .domain([min_epoch, max_epoch]) 
    .range(["blue", "red"]); 
    return blueRed(d); 
} 

function myEpochColor(d) { 
    return (epochColor(d.epoch)); 
} 

:

내 노드는 min_epoch 및 max_epoch 사이와 색깔이 코드를 기반으로 값 ".epoch"가 소스에 대한 목표 값이지만 행운은 없습니다. 그라디언트 코드를 평가할 때 노드에 대해 알지 못한다는 것이 문제라고 생각합니다. 나는 .call (기능)을 넣으려고했다. .. 사랑없이.

.link { 
    fill:   none; 
    stroke-width: 3px; 
    opacity:  1.00; 
    stroke:  url(#myEpochGradient); 
} 

...

var gradient = svg.append("svg:defs") 
    .append("svg:linearGradient") 
     .attr("id", "myEpochGradient") 
     .attr("gradientUnits", "objectBoundingBox") 
     .attr("x1", "0%").attr("y1", "0%") 
     .attr("x2", "100%").attr("y2", "0%"); 
    gradient.append("svg:stop") 
     .attr("offset", "0%") 
     .attr("stop-opacity", 1) 
     .attr("stop-color", function(d) {return myEpochColor(d.source)}); 
    gradient.append("svg:stop") 
     .attr("offset", "100%") 
     .attr("stop-opacity", 1) 
     .attr("stop-color", function(d) {return myEpochColor(d.target)}); 

이 아웃 파악에 도움은 대단히 감사하겠습니다.

TIA - 키스

Answer 1

내가 거기에 생각은 SVG에서 어떻게 그라데이션 인증 된 정의 작업에 대한 여기에 약간의 혼동이다. 위의 코드가 작동하더라도 모든 노드에서 작동하도록 할 수는 없습니다. 정지를 변경할 때마다 그래디언트를 참조하는 모든 항목을 변경해야하기 때문입니다. 에 적어도 하나의 그래디언트 정의가 필요합니다. 색상 - 천이가 필요합니다.

가장 쉬운 방법은 (렌더링 성능에 대해 말할 수는 없지만) 각 링크에 대해 각 g 요소에 새로운 그라디언트를 추가 한 다음 소스 및 대상 노드를 기준으로 정지를 설정하는 것입니다. 링크. 고유 한 ID를 부여한 다음 대각선 요소에서 참조하십시오. 그래디언트에 대한 코드가 대부분 작동해야합니다. SVG에 추가하는 대신 IFF를 사용하면 g 요소 에 링크 데이터가 바인딩됩니다. - 코드의 주된 문제는 사용자가하지 않는 것입니다. 아무 데나 데이터를 바인딩하므로 그라디언트 요소는 stop-color 함수에서 참조 할 수 없습니다.