2013-06-13 8 views
3

Я пытаюсь добавить разные фигуры в макет силы d3, но не удалось. Конечной целью является определение формы, основанной на свойствах самого узла. Я использую selection.enter(), чтобы затем .append() такие формы. Поскольку сила, направленная компоновка принимает только один массив узлов и .append() принимает строку, а не функциюдобавить различные формы в d3 force layout

node = vis.selectAll('.node') 
    .data(nodes, function(d) { 
     return d.filename 
    }); 

затем ...

node.enter() 
    .append(**'rect'**) //I need to vary this based on node properties 
    .attr('class', function(d) { 
     return 'node ' + d.entityType; 
     //return d.entityType; 
    }); 

Я не уверен, что лучший способ для выполните это. Заранее благодарю за любую помощь.

+0

Вы видели [это] (http://bl.ocks.org/mbostock/1062383)? –

+0

Я проверю это. Благодаря! – jbenckert

+0

Возможный дубликат [Различные символы узла для диаграммы направленности с помощью d3.js] (http://stackoverflow.com/questions/15855794/different-node-symbols-for-d3-js-force-directed-graph) –

ответ

1

Я думаю, что было бы проще вставлять пути SVG, а не прямые или круги. Он довольно гибкий, и вы сможете добавить практически любую фигуру, которую вы можете придумать для графика силы.

Следующий код рисует звезду. http://jsfiddle.net/UkeMS/

enter image description here

<svg> 
    <path d=" 
     m 100 100 
     l 23 12 
     l -4 -26 
     l 19 -19 
     l -27 -4 
     l -11 -23 
     l -12 23 
     l -27 4 
     l 19 19 
     l -4 26 
     l 24 -12 
    "/> 
</svg> 

Только не забудьте объявить пути, используя относительные координаты с строчными буквами (как описано выше) в отличие от абсолютных координат с использованием заглавных букв.

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