Написание простого силового макета с использованием D3.js

Я начинаю изучать D3.js и хочу написать простое приложение, используя силовую схему. Цель состоит в том, чтобы создать 3 узла, которые плавают вокруг и могут быть перетащены с помощью мыши. Это то, как далеко я получил использование документации, однако все, что я вижу, это маленький черный круг в верхнем левом углу моего окна (я предполагаю, что все три перекрываются там). Я поставил комментарии на каждый шаг - по крайней мере, это то, что я думаю, что они делают.Написание простого силового макета с использованием D3.js

<!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>

Мои вопросы:

Что мне не хватает? Что еще мне нужно сделать для того, чтобы узлы плавали и могли перетаскиваться?
Я хотел бы иметь микс или круглые и прямоугольные узлы (на основе некоторого атрибута узла). Как мне это сделать?
При запуске приложения, я вижу следующие ошибки в Firebug:

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

«NetworkError: 404 Не? Найдено - http://mbostock.github.com/d3/d3.layout.js?1.29.1 "

Почему это? Некоторые примеры силового макета, которые я пробовал, также дают эту ошибку, но они, похоже, работают нормально!

источник

2012-05-21 Naresh

Я постараюсь ответить на ваш вопрос, показывая вам примеры, которые работают.

Компоновка сила имеет эту особенность, что она начинается, показывая все узлы в верхней части экрана. Поскольку у ваших узлов есть , нет связей между ними (если они есть, я не вижу их в вашем коде) это нормально, что они нарисованы друг на друга. Вы можете попытаться установить исходный рендер, установив атрибуты X и Y узла в случайную позицию на экране. Что касается проблемы с плавающей ошибкой : я не уверен на 100%, что это сработает, так как я ее не тестировал, , но вы можете попробовать применить различные силы к своим узлам или в наименее в углах вашего окна дисплея. Это гарантирует, что они перемещаются и не выходят за пределы экрана (или используют ограничительную рамку окна ). Также вам нужно проверить некоторые атрибуты силы, связанные с , на скорость и стабильность макета, если вы хотите быть уверенными, что узлы всегда будут двигаться, а не просто плавать в течение некоторого времени и оставаться в фиксированном положении . Для узлов, чтобы быть перетаскиваемым вызова force.drag, как в http://bl.ocks.org/1095795
В этом примере показано, как представить узлы с различными формами в макете силы: http://bl.ocks.org/1062383.
Я хотел бы предложить единственной версии файла D3 который обычно имеет файл с именем d3v2 или что-то подобное ... Это могло бы, что вы не можете доступ к этим файлам из-за неполадок в сети или проблемы CORS или что-то похожее, то есть браузер не доставляет вам файл .Кажется, вы используете очень старую версию D3 (один год?). A версия, которая больше похожа на то, что вы видите в следующем фрагменте, будет , вероятно, не выдаст вам эту ошибку: если вы не можете использовать онлайн-версию, просто скачайте файл и поместите его в в тот же каталог.

Немного поиграйте с примерами D3 и прочитайте документацию.

источник

2012-05-21 17:33:54 paxRoman

Спасибо, paxRoman. Это очень помогло мне начать. Начиная с № 3, я понял, что я взял v1.29.1 из d3 из некоторого примера кода. Переключение на последнюю версию помогло с последней версией! Еще раз спасибо. – Naresh

Написание простого силового макета с использованием D3.js

ответ

Смежные вопросы