Блог

Кто-нибудь знает, как преобразовать это для работы в 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; });

          });
  

Рабочий код:https://codepen.io/annaet/pen/NREpjO

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

 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 forces, чтобы переместить симуляцию в середину 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 объект.

Наконец, функция tick осталась практически такой же:

 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() .