D3

Question

나는 D3 자습서를 읽고있다이 링크의 코드 다음입니다

와 에지 색상 변경 : http://www.d3noob.org/2013/03/d3js-force-directed-graph-example-basic.html

내가 지금까지 내용을 이해를하지만 서로 다른 색상을 변경하여 더 스타일을 배우려고 노력하고 있어요 . 노드 사이의 가장자리 색을 변경하려고하는데이 방법이 효과가 없습니다. 나도 알아야 돼.

path.style("stroke", red) 

예를 들면. 그러나 이것은 예상대로 모든 가장자리 색상을 변경합니다.

그러나 링크 배열의 값을 기준으로 가장자리 색상을 변경하고 싶습니다. 그래서 links.value가 < 인 경우 1 나는 녹색을 원한다면 오렌지 링크를 원한다. 난 내가

.style("stroke", function(d) {if d.value < 1 {return 'green'} else {return 'orange'} }); 

난 그냥 샘플 코드에 넣고 위치를 알아낼 수 없습니다 사용할 필요가 알고 다소 붙어입니다. 나는 단지 몇 가지 기본 D3에서 예를 통해 배우려고합니다. 감사!

Answer 1

당신은의 "입력"선택의 스타일을 설정 샘플 코드의 73의

// add the links and the arrows 
var path = svg.append("svg:g").selectAll("path") 
    .data(force.links()) 
    .enter().append("svg:path") 
    .attr("class", "link") 
    .attr("marker-end", "url(#end)"); 

가장자리 : https://plnkr.co/edit/tOBZdHXVrvcAmh9aHlsl?p=preview

: 여기

var path = svg.append("svg:g") 
    .selectAll("path") 
    .data(force.links()) 
    .enter() 
    .append("svg:path") 
    .attr("class", function(d) { return "link " + d.type; }) 
    .attr("class", "link") 
    .style("stroke", function(d){ 
     if(d.value < 1) {return 'green'} else {return 'orange'} 
    }) 
    .attr("marker-end", "url(#end)"); 

는 plunker이고

Answer 2

당신의 끝에서 체인 당신의 방법을 추가 할 수 있어야한다 : 그것은 라인 약