首页 新闻 搜索 专区 学院

javascript代码的小小疑问(78)——d3.js force图相关

0
悬赏园豆:60 [已关闭问题] 关闭于 2016-07-18 12:40
$(document).ready(function() {
//获取元素
var oChart = $("#chart");

console.log("Js文件工作");
//数据
var nodes = [
    { name: "阿里巴巴", type: "R" },
    { name: "1-1", type: "B" },
    { name: "1-1-1", type: "C" },
    { name: "1-1-2", type: "C" },
    { name: "1-1-3", type: "C" },
    { name: "1-1-4", type: "C" },
    { name: "1-1-5", type: "C" },
    { name: "1-2", type: "B" },
    { name: "1-2-1", type: "C" },
    { name: "1-2-2", type: "C" },
    { name: "1-2-3", type: "C" },
    { name: "1-2-4", type: "C" },
    { name: "x", type: "C" }

];

var edges = [

    { source: 0, target: 1 },
    { source: 1, target: 2 },
    { source: 1, target: 3 },
    { source: 1, target: 4 },
    { source: 1, target: 5 },
    { source: 1, target: 6 },
    { source: 0, target: 7 },
    { source: 7, target: 8 },
    { source: 7, target: 9 },
    { source: 7, target: 10 },
    { source: 7, target: 11 },

    { source: 12, target: 1 },
    { source: 12, target: 11 }
];

var width = 645;
var height = 645;


var svg = d3.select(oChart[0])
    .append("svg")
    .attr("width", width)
    .attr("height", height);

var myForce = d3.layout.force()
    .nodes(nodes) //指定节点数组
    .links(edges) //指定连线数组
    .size([width, height]) //指定范围
    .linkDistance(200) //指定连线长度
    .charge(-400); //相互之间的作用力

myForce.start(); //开始作用

console.log(nodes);
console.log(edges);

//**********添加连线**********      
var svg_edges = svg.selectAll("line")
    .data(edges)
    .enter()
    .append("line")
    .style("stroke", "#dcd6d9")
    .style("stroke-width", 3);

var myColor = d3.scale.category10();

//**********添加节点**********          
var svg_nodes = svg.selectAll("circle")
    .data(nodes)
    .enter()
    .append("circle")
    .attr("r", 12)
    .attr("class", "nodes-class")
    .style("fill", function(d, i) {

        if (d.type == "R") {


            console.log(d.name);

            return myColor(3);

        } else if (d.type == "B") {

            console.log(d.name);
            return myColor(2);

        } else if (d.type == "C") {

            console.log(d.name);
            return myColor(1);
        }





        //console.log(myForce.nodes([0]));
        //console.log(myForce.nodes().linkDistance);
        //console.log(nodes[0].name);

    })
    .call(myForce.drag); //使得节点能够拖动




//**********添加描述节点的文字**********
var svg_texts = svg.selectAll("text")
    .data(nodes)
    .enter()
    .append("text")
    .style("fill", "black")
    .attr("dx", 10)
    .attr("dy", 8)
    .text(function(d) {
        return d.name;
    });



//**********对于每一个时间间隔**********
myForce.on("tick", function() {

    //更新连线坐标
    svg_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;
        });

    //更新节点坐标
    svg_nodes.attr("cx", function(d) {
            return d.x;
        })
        .attr("cy", function(d) {
            return d.y;
        });



    //更新文字坐标
    svg_texts.attr("x", function(d) {
            return d.x;
        })
        .attr("y", function(d) {
            return d.y;
        });
});
});

 

我理想是根据json数据type不同,该节点的圆点和连线样式也不同,颜色可以区别出来,

但点大小和线长度无法区别,官方api也无效,请文怎么做?

Coca-code的主页 Coca-code | 初学一级 | 园豆:6
提问于:2016-04-25 10:14
< >
分享
所有回答(3)
0

5个豆豆要看这么长的代码,累~

waiter | 园豆:1000 (小虾三级) | 2016-04-25 10:30

呵呵,关键效果能出来呀,给你一半豆豆也没问题。。:)

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2016-04-25 10:49
0

我研究了半天

发现线的长度已经固定死了

var myForce = d3.layout.force()

.nodes(nodes) //指定节点数组

.links(edges) //指定连线数组

.size([width, height]) //指定范围

.linkDistance(200) //指定连线长度

.charge(-400); //相互之间的作用力

刘宏玺 | 园豆:14006 (专家六级) | 2016-04-25 11:59

那句代码我注释掉也没用,在分层样式长度,结果还是默认的20

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2016-04-25 12:38

所以还是不行。。

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2016-04-25 13:48

@Coca-code: 

力导向图(Force-Directed Graph),是绘图的一种算法。在二维或三维空间里配置节点,节点之间用线连接,称为连线。各连线的长度几乎相等,且尽可能不相交。节点和连线都被施加了力的作用,力是根据节点和连线的相对位置计算的。根据力的作用,来计算节点和连线的运动轨迹,并不断降低它们的能量,最终达到一种能量很低的安定状态。

支持(0) 反对(0) 刘宏玺 | 园豆:14006 (专家六级) | 2016-04-25 16:59

@刘宏玺: 

http://share.qixin007.com/mobile/network/?eid=9d4097de-0163-450a-bf62-4efaa34d7761&from=app

感觉这个在样式上是优秀的

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2016-04-25 20:09

@Coca-code: 这个的是固定死的,所以线的长度可以改变

支持(0) 反对(0) 刘宏玺 | 园豆:14006 (专家六级) | 2016-04-26 09:35

@刘宏玺: 是的,这方面的资料除了api,sample很少

支持(0) 反对(0) Coca-code | 园豆:6 (初学一级) | 2016-04-26 10:47
0

在大多数的style里面用.style("" ,function(d,i){

  if(){

    //to do

}

 

  if(){

    //to do

}

 

});

Coca-code | 园豆:6 (初学一级) | 2016-04-27 10:46
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册