d3 강제 곡선에서 곡선 사용

d3 힘 레이아웃을 통해 일부 데이터를 시각화하고 싶습니다.d3 강제 곡선에서 곡선 사용

그러나 노드를 연결하는 링크는 직선입니다. 그러나 데이터 에는 두 개의 노드를 연결하는 여러 개의 가장자리가있을 수 있습니다. 그래서 의 직선은 힘 레이아웃을 모두 올바르게 표시 할 수 없습니다. 나는 라인이 아닌 링크에 경로를 추가하려고 시도했다. 그러나 그것은 효과가 없었습니다. 나도 모르겠다. 잘못된 방향으로 또는 강제로 사용했기 때문에 레이아웃은 경로를 링크로 허용하지 않기 때문인지 여부.

출처

2012-06-19 Guoxing Li

시도한 코드와 결과 (아마도 http://bl.ocks.org/ 또는 http://jsfiddle.net을 통해)를 보여주는 간단한 예제는 사람들이 당신을 도울 수 있도록 먼 길을 간다. – Phrogz

[갤러리] (https://github.com/mbostock/d3/wiki/Gallery)에서 링크 된 [곡선 가장자리가있는 강제 레이아웃] (http://bl.ocks.org/1153292)의 예가 있습니다. – mbostock

비슷한 요구 사항이 있습니다. Pls 내 질문을 참조하십시오. /questions/12853134/enclosing-the-nodes-of-a-d3-force-directed-graph-in-a-circle-or-a-polygon-or-a-c –

사용 SVG는 : 경로 라인

var viz = d3.select("body") 
    .insert("svg:svg", "h2") 
    .attr("width", "100%") 
    .attr("height", "100%")

의 insted. . . . . . . . 여기

.append("svg:path") 
    .attr("d", "M0,-5L10,0L0,5"); 

var path = svg.selectAll("path").data(force.links()).enter() 
       .append("svg:path").attr("source", function(d) { 
        return d.source.id; 
       }).attr("target", function(d) { 
        return d.target.id; 
       }).attr("class", "link").attr('marker-end', 'url(#head)');

소스 및 대상가 지정된 노드, 커브는 'D'SVG : 경로 '의 속성과 마커 엔드 특성 화살촉위한

출처

2013-03-11 06:41:42

d3 강제 곡선에서 곡선 사용

답변

관련 문제