저는 D3의 네트워크 다이어그램을 크랭크 작업합니다 (나는 Force Directed의 출력을 좋아하지 않았습니다). 이를 위해 각 x/y 좌표가있는 노드 배열을 생성했습니다.베 지어 제어점 오리엔테이션 d3
{
"nodes" : [
{
"name" : "foo",
"to" : ["bar"]
},
{
"name" : "bar",
"to" : ["baz"]
},
{
"name" : "baz"
}
]
}
: g 및 SVG의 연속이 데이터 바인딩 : 상위 걸려 g 소자.
addSvg = function() {
// add the parent svg element
return d3.select('#visualisation')
.append('svg')
.attr('width', width)
.attr('height', height);
};
addSvgGroup = function (p) {
// add a containing svg:g
return p.append('svg:g').
attr('transform', 'translate(0,0)');
};
addSvgNodes = function(p, nodes) {
// attach all nodes to the parent p data
// and render to svg:g
return p.selectAll('g')
.data(nodes)
.enter()
.append('svg:g')
.attr('class', 'node');
};
transformNodes = function (nodes) {
// position nodes manually
// deprecate later for column concept
nodes.attr('transform', function (o, i) {
offset = (i + 1) * options.nodeOffset;
// options.nodeOffset = 150
o.x = offset;
o.y = offset/2;
return 'translate(' + offset + ',' + offset/2 + ')';
});
};
가 그럼 난 부모 SVG에 이러한 항목을 첨부 (이, 난 그냥 내 발을 얻고 나중에 동적 예정) : g을, 일부를 정지 그 (것)들 떨어져 원본. 이것은 svg 내에서 텍스트의 계단이 왼쪽에서 오른쪽으로 내림차순이됩니다. 여태까지는 그런대로 잘됐다.
다음으로 링크를 생성하고 싶습니다. 따라서 현재 노드에 관계가 있는지 확인한 다음 해당 노드 위치를 얻는 방법을 사용합니다. 마지막으로 d3.svg.diagonal을 사용하여 일련의 링크를 생성하고 소스/대상을 적절한 노드로 설정합니다. 명료하게 작성된 필기체
getLinkGenerator = function (o) {
return d3.svg.diagonal()
.source(o.source)
.target(o.target)
.projection(function (d) {
console.log('projection', d);
return [d.x, d.y]
});
};
지금까지는 베지에 대한 컨트롤 핸들을 제외하고는 너무 좋았습니다.
<path d="M150,75C150,112.5 300,112.5 300,150" style="fill: none" stroke="#000"></path>
그러나 나는 그것을 제어 핸들의 방향을 변경하고 싶습니다 -이 보이게 것
<path d="M150,75C200,75 250,150 300,150" style="fill: none" stroke="#000"></path>
즉 : 경로 D 속성 B 노드에 노드 A에서 예를 들어, 따라서이다 예제 페이지의 덴 드로 그래프와 비슷합니다.
return [d.y, d.x]
하지만 이렇게하면 컨트롤 포인트가 지향하는 동안, 내가 좋아하는 것처럼, 점의 위치를 벗어 : 내가 접을 수 dendrograph 예에서 발견하는 것은 축의 반전을 반환한다는 것입니다 자신의 X/Y 좌표도 반전 즉 구타 (, 효율적으로 번역.
다른 사람이 같은 문제가 발생하거나 문제를 해결하는 방법에 대한 생각?