강제 레이아웃 (그래프 시각화 용)을 사용하여 약간 일반적인 것을하고 싶습니다. 별자리와 모두가 재미 있지만, 시계열 데이터의 경우 그다지 도움이되지 않습니다. 예를 들어, 시각화의 "탄력성"을 유지하면서 데이터 집합에 나타나는 시간에 따라 노드를 레이아웃하여 일부 레이아웃으로 레이아웃을 제한 할 수 있기를 바랍니다. d3을 사용하여이 작업을 수행 할 수 있습니까?Constrained d3.js 강제 표시
내 의견에 대해 자세히 설명해 드리겠습니다. 그렇습니다. 포스 레이아웃은 사실 노드 자체의 위치를 지정하는 것이 아니라 단순히 위치를 계산합니다. tick 이벤트의 처리기에서 일반적으로 위치 지정을 처리하는 함수를 제공합니다. 여기서 노드를 움직일 수있는 방법을 제한하는 임의의 제약 조건을 추가 할 수 있습니다.
stock examples 중 하나를 선택하면 x 좌표를 제한없는 y로 의도 한 위치의 ± -10 범위로 제한 할 수 있습니다. 여기
force.on("tick", function() {
node.each(function(d) {
var intended = scale(d.value);
d.x = d.px = Math.min(intended + 10, Math.max(intended - 10, d.px));
});
node.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; });
});
고맙습니다, 라스! 내가 물어봐도 될까요? 'var intended = scale (d.value)'는 내 경우에는 'var xpos = scale (d.date)'로 대체해야하는데, 여기서 datetime은 내가 넣고 싶은 값입니다. x 축? – ericmjl
변수를 호출 한 것이 확실하지 않으므로 코드를 게시하지 않았지만 네, 이것은 x 위치를 지정합니다. –
Lars 감사합니다! 내 코드에서 다른 버그를 수정 한 후 테스트 할 수 있었고 임시로 작동합니다! 이제는 저울을 수정하여 제대로 작동하는지 확인하십시오. :-) 다시 한번 감사드립니다! – ericmjl
Webcola는 D3.JS를 사용하여 제약 조건 기반 레이아웃을 만드는 데 훌륭한 도구입니다.
예, [이 질문] (http://stackoverflow.com/questions/15100060/d3-js-force-directed-layout-constrained-by-a-shape) 당신에게 할 몇 가지를 참조하십시오 포인터. –