Я пытаюсь повторить этот расклад, сделанный в более старой версии d3:

http://jsfiddle.net/VividD/5Yv24/

Вот часть кода, который у меня есть:

// function gravityRight(alpha: number) { // for (const n of nodes) { // //@ts-ignore // n.vy = ny * alpha * -0.1; // } // } const forceX = d3.forceX(width * 2).strength(0.5); const graphLayout = d3 .forceSimulation() .nodes(nodes as any) .force( "links", d3 .forceLink() .links(links) .id((d: any) ={amp}gt; d.id) ) .force("charge", d3.forceManyBody().strength(-20)) .force("center", d3.forceCenter(innerWidth / 2, innerHeight / 2)) // .force("gravity", gravityRight) .force("x", forceX) .on("tick", ticked); 

Однако это не работает, как я ожидаю, мой график несколько искажается, но он не указывает вниз (или не подходит для моих точных целей), есть идеи о том, как этого добиться?

мой график

Я запустил его, заблокировав первый узел где-то на экране, чтобы сила тяжести не перетаскивала его с остальными узлами, вот реализация:

  const forceX = d3.forceX(width).strength(0.013); const graphLayout = d3 .forceSimulation() .nodes(nodes as any) .force( "links", d3 .forceLink() .links(links) .strength(2) .id((d: any) ={amp}gt; d.id) ) .force("charge", d3.forceManyBody().strength(-200)) .force("x", forceX) .on("tick", ticked); // Lock the first node in the middle of the screen nodes[0].fx = margin.left   20; nodes[0].fy = heightMiddle; 

правый график

Теперь мой график силы направлен вправо, как я и хотел :)