javascript - 将 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

工作代码笔: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()来运行模拟。