SOURCE

console 命令行工具 X clear

                    
>
console
var height = 500;
var width = 500;
var nodes = [
  {value:"66666666",type:"home",index:"0"},
  {value:"11111111111",type:"phone",index:"1"},
  {value:"22222222222",type:"phone",index:"2"},
  {value:"33333333333",type:"phone",index:"3"},
  {value:"44444444444",type:"phone",index:"4"},
  {value:"55555555555",type:"phone",index:"5"},
  {value:"aaa",type:"weixin",index:"6"},
  {value:"bbb",type:"weixin",index:"7"},
  {value:"ccc",type:"weixin",index:"8"},
  {value:"ddd",type:"weixin",index:"9"},
  {value:"eee",type:"weixin",index:"10"},
  {value:"fff",type:"weixin",index:"11"},
];
var links = [
  {source:0,target:1},
  {source:0,target:2},
  {source:0,target:3},
  {source:0,target:4},
  {source:0,target:5},
  {source:2,target:6},
  {source:2,target:7},
  {source:2,target:8},
  {source:3,target:9},
  {source:3,target:10},
  {source:3,target:11},
]
 var zoom = d3.behavior.zoom()
          .scaleExtent([1, 4])
          .on("zoom", zoomed);
var svg = d3.select("#forceMap").append("svg")
						.attr("width",width)
            .attr("height",height)
            .attr("id","forceSvg")
						.call(zoom)
 .on("dblclick.zoom",null);
var mapG = svg.append("g")
.attr("id","forceGroup");

function zoomed(d) {
    	
      mapG.attr("transform",'translate('+width/2+','+height/2+'),scale('+d3.event.scale+')translate('+-width/2+','+-height/2+')');
  
                    }
var force = d3.layout.force()
                    .nodes(nodes)
                    .links(links)
                    .size([width,height])
                    .linkDistance(100)
                    .charge([-1250])
                    .gravity(0.5)
                    .friction(0.5);
force.start();
var linkG = mapG.selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("class","link")
.attr("stroke","#ccc");
var nodeG = mapG.selectAll(".node")
.data(nodes)
.enter()
.append("circle")
.attr("class","node")
.attr("r",8)
.attr("fill",function(d){
  switch(d.type){
    case "home": return "red";break;
    case"phone": return "blue";break;
    case "weixin": return "green";break;
  }
})
 .call(force.drag);


force.on("tick", function () {
  									linkG.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;
                    });


                nodeG.attr("cx", function (d) {
                    return d.x
                })
                .attr("cy", function(d){
                  return d.y
                });
   drawThumb();
});
							
function drawThumb(){
  d3.select("#thumbSvg").remove();
  var thumbSvg = d3.select("#thumbMap").append("svg")
						.attr("width",100)
            .attr("height",100)
            .attr("id","thumbSvg");
var thumbG = thumbSvg.append("g")
.attr("id","thumbGroup");
var thumbLink = thumbG.selectAll(".tlink")
.data(links)
.enter()
.append("line")
.attr("class","tlink")
.attr("stroke","#ccc")
.attr("x1", function (d) {
                        return d.source.x/5;
                    })
                    .attr("y1", function (d) {
                        return d.source.y/5;
                    })
                    .attr("x2", function (d) {
                        return d.target.x/5;
                    })
                    .attr("y2", function (d) {
                        return d.target.y/5;
                    });
var thumbNode = thumbG.selectAll(".tnode")
.data(nodes)
.enter()
.append("circle")
.attr("class","tnode")
.attr("r",1.2)
.attr("fill",function(d){
  switch(d.type){
    case "home": return "red";break;
    case"phone": return "blue";break;
    case "weixin": return "green";break;
  }
})
.attr("cx", function (d) {
                    return d.x/5
                })
                .attr("cy", function(d){
                  return d.y/5
                });
}
<div id="forceMap"></div>
<div id="thumbMap"></div>
#forceMap{
  width:500px;
  height:500px;
  background:#fff;
  margin-bottom:10px;
  z-index:1;
}
#thumbMap{
  width:100px;
  height:100px;
  background:#ececec;
  position:absolute;
  left:10px;
  top:10px;
  z-index:99;
}