首页 > 代码库 > D3_book 11.3 force

D3_book 11.3 force

2024-07-02 01:29:45   225人阅读

<!-- pie example -->
<!DOCTYPE html>
<meta charset="utf-8">
<style>

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
var dataset = {
        nodes: [
          { name: "Adam" },
          { name: "Bob" },
          { name: "Carrie" },
          { name: "Donovan" },
          { name: "Edward" },
          { name: "Felicity" },
          { name: "George" },
          { name: "Hannah" },
          { name: "Iris" },
          { name: "Jerry" }
        ],
        edges: [
          { source: 0, target: 1 },
          { source: 0, target: 2 },
          { source: 0, target: 3 },
          { source: 0, target: 4 },
          { source: 1, target: 5 },
          { source: 2, target: 5 },
          { source: 2, target: 5 },
          { source: 3, target: 4 },
          { source: 5, target: 8 },
          { source: 5, target: 9 },
          { source: 6, target: 7 },
          { source: 7, target: 8 },
          { source: 8, target: 9 }
        ]
      };
var colors=d3.scale.category10();
var w=300,h=300;
var svg=d3.select(‘body‘)
          .append(‘svg‘)
          .attr({
            ‘width‘:w
            ,‘height‘:h
          })
var force=d3.layout.force()
                   .nodes(dataset.nodes)
                   .links(dataset.edges)
                   .size([w,h])
                   .linkDistance([50])
                   .charge([-500])
                   .start()
                   ;
var edges=svg.selectAll(‘line‘)
             .data(dataset.edges)
             .enter()
             .append(‘line‘)
             .style({
              ‘stroke‘:‘#ccc‘
              ,‘stroke-width‘:1
             })
             ;
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)
             ;
force.on(‘tick‘,function(){
  edges.attr({
    ‘x1‘:function(d){
      return d.source.x;
    }
    ,‘y1‘:function(d){
      return d.source.y;
    }
    ,‘x2‘:function(d){
      return d.target.x;//这里要变为target
    }
    ,‘y2‘:function(d){
      return d.target.y;
    }
  })
  ;
  nodes.attr({
    ‘cx‘:function(d){
      return d.x;
    }
    ,‘cy‘:function(d){
      return d.y;
    }
  })
})
</script>

node是动态的。


联系
我们