変換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：私は、リンクおよび充電方法を更新

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); 

：https://codepen.io/annaet/pen/NREpjO

主な変更点は、updated力のシミュレーション方法を使用していました元のコードから追加し、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()を呼び出すことによって実行されます。