Как добавить две разные формы в D3-ориентированный граф, основанный на значении поля формы?

Question

Я новичок в D3. Я использую силовой граф. Я хочу добавить два разных типа фигур в узлах узла.

Моего JSON заключается в следующем:

{ 
    "nodes":[ 
    {"name":"00:00:00:00:00:00:00:01","group":0,"shape":1}, 
    {"name":"00:00:00:00:00:00:00:02","group":1,"shape":1}, 
    {"name":"00:00:00:00:00:00:00:03","group":2,"shape":1}, 
    {"name":"00:00:00:00:00:00:00:11","group":0,"shape":0}, 
    {"name":"00:00:00:00:00:00:00:21","group":1,"shape":0}, 
    {"name":"00:00:00:00:00:00:00:31","group":2,"shape":0}, 
    {"name":"00:00:00:00:00:00:00:32","group":2,"shape":0}, 
    {"name":"00:00:00:00:00:00:00:12","group":0,"shape":0}, 
    {"name":"00:00:00:00:00:00:00:22","group":1,"shape":0} 
    ], 
    "links":[ 
    { "source": 0, "target": 0, "value": 5 }, 
    { "source": 1, "target": 1, "value": 5 }, 
    { "source": 2, "target": 2, "value": 5 }, 
    { "source": 3, "target": 0, "value": 5 }, 
    { "source": 4, "target": 1, "value": 5 }, 
    { "source": 5, "target": 2, "value": 5 }, 
    { "source": 6, "target": 2, "value": 5 }, 
    { "source": 7, "target": 0, "value": 5 }, 
    { "source": 8, "target": 1, "value": 5 } 
    ] 
} 

Если значение формы 1, затем нарисуйте круг, и если значение формы 0, затем нарисуйте прямоугольник. силы ориентированный граф Пример ссылка: http://bl.ocks.org/mbostock/4062045

Я попытался пример ссылки JSFiddle: http://jsfiddle.net/mayurchavda87/Sc2xC/3/

Answer 1

Вы можете сделать это, как показано на, например, this example, используя элементы symbol generator и path вместо элементов SVG для конкретных фигур. Код для добавления формы становится

var node = svg.selectAll(".node") 
    .data(data.nodes) 
    .enter().append("path") 
    .attr("class", "node") 
    .attr("d", d3.svg.symbol() 
    .type(function(d) { return d3.svg.symbolTypes[d.s]; })) 
    .style("fill", function(d) { return color(d.group); }) 
    .call(force.drag); 

Тогда вы также должны изменить свой tick обработчик изменить атрибут transform из path элементов:

node.attr("transform", function(d) { 
    return "translate(" + d.x + "," + d.y + ")"; 
}); 

here Полный jsfiddle.