Преобразование диаграммы силы D3 в v4

Question

Кто-нибудь знает, как преобразовать это, чтобы работать в v4? Я преуспел после исследования изменений. Благодаря!

Полный код, если это необходимо: http://codepen.io/jeffm64/pen/jrQAQK

 var force = d3.svg.force() 
      .nodes(dataset.nodes) 
      .links(dataset.edges) 
      .size([w, h]) 
      .linkDistance([50]) 
      .charge([-100]); 

      //Create edges as lines 
      var edges = svg.selectAll("line") 
      .data(dataset.edges) 
      .enter() 
      .append("line") 
      .style("stroke", "#ccc") 
      .style("stroke-width", 1); 

      //Create nodes as circles 
      var nodes = svg.selectAll("circle") 
      .data(dataset.nodes) 
      .enter() 
      .append("circle") 
      .attr("r", 10) 
      .style("fill", function(d, i) { 
       return colors(i); 
      }) 
      .call(force.drag); 

      //Every time the simulation "ticks", this will be called 
      force.on("tick", function() { 

      edges.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; }); 

      nodes.attr("cx", function(d) { return d.x; }) 
       .attr("cy", function(d) { return d.y; }); 

      }); 

Answer 1

Рабочая Codepen: https://codepen.io/annaet/pen/NREpjO

Основные изменения с использованием методов моделирования updated силы:

var force = d3.forceSimulation() 
    .force('link', d3.forceLink()) 
    .force("charge", d3.forceManyBody(-100)) 
    .force("x", d3.forceX(w/2)) 
    .force("y", d3.forceY(h/2)) 
    .on("tick", tick); 

Я обновил ссылку и зарядовых методы от вашего исходного кода, а также добавлены в x и y силы для перемещения симуляции до середины svg.

Затем я добавил метод start, чтобы настроить узлы и ссылки:

function start() { 
    var nodeElements = svg.selectAll(".node") 
    .data(dataset.nodes, function(d){return d.id}); 
    var linkElements = svg.selectAll(".link") 
    .data(dataset.edges); 

    nodeElements.enter() 
    .append("circle") 
     .attr("class", function(d) {return "node " + d.id; }) 
     .attr("r", 10) 
     .style("fill", function(d, i) { 
     return colors(i); 
     }); 
    linkElements.enter() 
    .insert("line", ".node") 
     .attr("class", "link") 
     .style("stroke", "#ccc") 
     .style("stroke-width", 1); 

    nodeElements.exit().remove(); 
    linkElements.exit().remove(); 

    force.nodes(dataset.nodes) 
    force.force("link").links(dataset.edges) 
    force.restart(); 
} 

Это обрабатывает добавление ваших узлов и связей. Вы заметите, что сейчас вы проходите в своем dataset объекте.

Наконец функция клеща осталась такой же:

function tick() { 
    var nodeElements = svg.selectAll(".node"); 
    var linkElements = svg.selectAll(".link"); 

    nodeElements.attr("cx", function(d,i) {return d.x; }) 
    .attr("cy", function(d) { return d.y; }) 

    linkElements.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; }); 
} 

Моделирование выполняется путем вызова start().