d3.js를 사용하여 간단한 강제 레이아웃 앱을 작성합니다

StackOverflow https://stackoverflow.com//questions/10679720

  •  12-12-2019
  •  | 
  •  

문제

나는 d3.js를 배우고 힘 레이아웃을 사용하여 간단한 앱을 쓰고 싶었습니다. 목표는 주위에 떠있는 3 개의 노드를 만드고 마우스를 사용하여 드래그 할 수 있습니다. 이것은 내가 문서를 사용하여 얼마나 멀리든지, 내 창문의 왼쪽 왼쪽 구석에 작은 검은 색 원은 (나는 3 명 모두가 겹치는 것으로 가고 있다고 가정 함)입니다. 나는 각 단계에 의견을 두었습니다. 적어도 내가 그들이하고있는 일이라고 생각하는 것입니다. 

<!doctype html>
<html>
<head>
    <title>Simple Force Layout</title>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.geom.js?1.29.1"></script>
    <script type="text/javascript" src="http://mbostock.github.com/d3/d3.layout.js?1.29.1"></script>
</head>

<body>
    <div id="canvas"></div>

    <script type="text/javascript">

var conf = {
    canvasWidth: 600,
    canvasHeight: 400
}

var nodes = [
    { 'name': 'Node 1' },
    { 'name': 'Node 2' },
    { 'name': 'Node 3' }
];

// Add nodes to force layout and start it
var force = d3.layout.force()
    .nodes(nodes)
    .size([conf.canvasWidth, conf.canvasHeight])
    .start();

// Create an svg element
var svg = d3.select("#canvas")
    .append("svg:svg")
    .attr("width", conf.canvasWidth)
    .attr("height", conf.canvasHeight);    

// Create a circle for each node
var circle = svg.append("svg:g").selectAll("circle")
    .data(force.nodes())
  .enter().append("svg:circle")
    .attr("r", 6)
    .call(force.drag);

    </script>
</body>
</html>
.

내 질문 :

  1. 내가 뭘 누락 한거야? 노드가 주위를 떠나 드래그 할 수 있도록 노드가 무엇을해야합니까?
  2. 노드의 일부 속성을 기반으로 혼합 또는 원형 및 직사각형 노드를 갖고 싶습니다. 어떻게해야합니까?

  3. 응용 프로그램을 실행하면 firebug : 에 다음 오류가 나타납니다.

    "NetworkError : 404 Not Found - http : //mbostock.github .com / d3 / d3.geom.js? 1.29.1 " d3.geom.js? 1.29.1

    "NetworkError : 404 Not Found - http : //mbostock.github .com / d3 / d3.layout.js? 1.29.1 "

    왜 이것이 있습니까? 내가 시도한 일부 강제 레이아웃 예제는 또한이 오류를주지 못하지만, 그들은 잘 작동하는 것처럼 보입니다!

도움이 되었습니까?

해결책

나는 당신에게 일하는 예를 보여줌으로써 귀하의 질문에 답하려고 노력할 것입니다.

  1. 힘 레이아웃은이 특수성을 표시하여 표시하여 시작합니다 화면 상단의 모든 노드입니다. 귀하의 노드는 가지고 있기 때문에 그들 사이의 링크가 없습니다 (코드에서 볼 수 없으면) 서로 꼭대기에 그려지는 정상입니다. 당신은하려고 할 수 있습니다 이 초기 렌더링을 수정하여 x 및 y 속성을 설정하여 노드가 화면의 임의의 위치로 이동합니다. 떠있는 것처럼 문제점 : 나는 그것이 테스트를받지 못했을 때 이것이 일할 것입니다. 그러나 당신은 당신의 노드에 다른 세력을 적용하려고 시도 할 수 있습니다. 디스플레이 창의 모서리에서 가장 적다. 이것은 그것을 보장 할 것입니다 그들은 움직이고 화면을 벗어나지 않거나 창을 사용하지 마십시오. 경계 상자). 또한 일부 힘 속성을 확인해야합니다 레이아웃의 속도와 안정성을 확보하고 싶다면 노드는 항상 움직일 것입니다. 자위. 드래그 할 수있는 노드가 force.drag 호출을 위해 http://bl.ocks.org/1095795

  2. 이 예에서는 노드를 다른 모양으로 제공하는 방법을 보여줍니다. 강제 레이아웃 : http://bl.ocks.org/1062383 .

  3. D3 의 단일 파일 버전을 제안합니다. 일반적으로 D3V2 또는 무언가 유사한 파일이 있습니다 ... 당신이 할 수없는 것일 수 있습니다. 네트워크 문제 또는 Cors 문제로 인해 해당 파일에 액세스하거나 비슷한 것, 브라우저가 당신을 전달하지 않을 것입니다. 파일. 당신은 아주 오래된 버전의 D3 (1 년 오래 되었습니까?)을 사용하는 것 같습니다. ㅏ 다음 스 니펫에서 보는 것과 더 많이 보이는 버전은 아마 그 오류를 던지지 않을 것입니다 : 만약 당신 온라인 버전을 사용할 수 없음 파일을 다운로드하여 넣으십시오. 같은 디렉토리.

    D3 예제와 조금만 사용하고 문서를 읽으십시오.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top