首页 > 代码库 > d3.js学习-联系力学图
d3.js学习-联系力学图
对这个做了一个小小的改变
json数据也在以上链接
var width=screen.width-100, height=screen.height-160;//颜色尺度var color = d3.scale.category20();//var force=d3.layout.force() .charge(-120)//节点间的电荷,负数表示排斥,正数表示吸引 .linkDistance(60)//节点间的距离 .size([width,height]);//节点图的大小var svg=d3.select("body").append("svg") .attr("width",width) .attr("height",height);d3.json("force.json",function(error,graph){//请求一个json文件,回掉函数 //回调函数包括两个参数,error以及返回的json数据,即返回的数据 force.nodes(graph.nodes) .links(graph.links) .start();//开始 //定义连接线 var link=svg.selectAll(".link") .data(graph.links) .enter() .append("line") .attr("class","link"); //定义节点 var node=svg.selectAll(".node") .data(graph.nodes) .enter() .append("circle") .attr("class","node") .attr("r",function(d){ return 5+d.group;//半径 }) .style("fill",function(d){ return color(d.group);//颜色 }) .call(force.drag); //鼠标悬停 node.append("title") .text(function(d){ return d.name; }); force.on("tick", function() { link.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; }); node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); });});
css
.node{ stroke:#fff; stroke-width:1.5px;}.link{ stroke:#999; stroke-opacity:.6; stroke-width:1;}
d3.js学习-联系力学图
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。