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()来运行模拟。

将D3力图转换为v4

1 个答案: