Показать социальный граф с D3 силы макете

Question

Я хочу, чтобы показать социальный граф с D3 (Дата-Driven-документы) с триста узлов

Данные Json выглядит следующим образом.

{ 
    "nodes":[ 
{"name":"node1","group":1}, 
{"name":"node2","group":1}, 
{"name":"node3","group":1}, 
{"name":"node4","group":2}, 
{"name":"node5","group":2}, 
{"name":"node6","group":2} 
], 
"links":[ 
{"source":1,"target":0,"value":1}, 
{"source":2,"target":0,"value":1}, 
{"source":1,"target":2,"value":1}, 
{"source":3,"target":4,"value":1}, 
{"source":3,"target":5,"value":1}, 
{"source":4,"target":5,"value":1}, 
{"source":1,"target":3,"value":1} 
] 
} 

Сейчас я встречаюсь с несколькими проблемами

1. Когда я использую node.append («образ») для каждого узла, частота кадров настолько мала (так же, как пауза и пропустить)!

2. График всегда уходит далеко от центра, после использования d3.layout.force(). Charge (любое число) .distance (10) .charge (-100) .size ([width, height])

3. Теперь я хочу показать социальный граф с группами, узлы имеют profile_image и имя! как сделать мой график прозрачным? Нужно много советов и примеров, спасибо!

Answer 1

Для вопроса 2 используйте ограничительную коробку. Хороший пример можно найти в функции галочки here.

node.attr("cx", function(d) { return d.x = Math.max(r, Math.min(w - r, d.x)); }) 
    .attr("cy", function(d) { return d.y = Math.max(r, Math.min(h - r, d.y)); }); 

link.attr("x1", function(d) { return d.source.x; }) 
    .attr("y1", function(d) { return d.source.y; }) 
    .attr("x2", function(d) { return d.target.x; }) 
    .attr("y2", function(d) { return d.target.y; }); 

Это предотвращает перемещение узлов за пределы ограничивающей рамки.

Кроме того, вы можете установить гравитацию, чтобы централизовать узлы. Как упоминал Ларс в своем комментарии, кодекс не указан, чтобы помочь вам дальше.