어떻게 마커 (화살표 헤드)의 색상을 변경합니까?

Question

버튼을 클릭 할 때 표시되는 선/링크와 동일한 색상으로 마커를 표시하고 싶습니다.

var arrows = inner.append("defs").selectAll("marker") 
     .data(data) 
     .enter().append("marker") 
      .attr("id", "arrow") // changed to - .attr("id", function(d){ return 'arrow' + d.name}) 
      .attr("viewBox", "0 -5 10 10") 
      .attr("refX", 20) 
      .attr("refY", 0) 
      .attr("markerWidth", 10) //size of arrow head 
      .attr("markerHeight", 10) 
      .attr("orient", "auto") 
      .style("stroke-width", lineWidth) 
      .append("path") 
      .attr("d", "M0,-5L10,0L0,5 L10,0 L0, -5") 
      .style("stroke", "steelblue"); 

내가 링크에 화살표를 추가합니다 :

var links = inner.selectAll("line.link") 
      .style("stroke", function(d) { return color(d.name); }); 

: 지금은 버튼을 한

var links = svg.selectAll(".link").append("g") 
.style("marker-end", "url(#arrow)") //-changed to - .style("marker-end", function(d,i){ return 'url(#arrow' + d.name+ ')' }) 

은 링크의 색상을 변경할 수

여기 화살표 만들기

마커로 처리하려고했으나 작동하지 않는 것 같습니다.

var arrows = inner.selectAll("#arrow") 
      .style("stroke", function(d) { return color(d.name); }); 

나는 마커에서 동일한 데이터를 사용하고 있는데 원래의 문제라고 생각했지만 필자는 벽에 닿았 고이를 수행하는 방법을 모른다. 여기

내가에서 작업을 시도했지만 여전히 캔트 나의

작업받을 것으로 보인다되는 작동하는 예이다 " http://bl.ocks.org/dustinlarimer/5888271는"

Answer 1

개별적으로 대응하기 위해 동일한 마커의 색상을 변경할 수 없습니다 즉석에서 선의 색상. 이를 수행하는 유일한 방법은 원하는 색에 해당하는 ID 또는 클래스를 사용하여 def에서 다르게 색칠 된 별도의 마커를 만든 다음 해당 CSS 선택기를 사용하는 것입니다.

링크 된 예제에서 마커는 색상과 모양으로 정의되며 해당 줄에서 개별적으로 참조됩니다.