D3.js动画更新

时间：2017-01-05 00:06:17

标签： javascript d3.js

我正在使用类似的东西：

Fiddle

我正在使用jQuery加载数据并使用它运行整个更新功能。我想要做的是让所有圈子在触发更新之前更接近主圈圈。我可以做那样的事情吗？我尝试重写tick函数以执行与现在相同的操作，仅使用d.x-50，但这不起作用。

1 个答案:

答案 0 :(得分：1)

有几种方法可以做你想要的，但这是我的解决方案：用较小的linkDistance重启力：

var inter = setInterval(function() {
    updateData();
    setTimeout(function() {
        force.linkDistance(20);
        force.start().alpha(0.01);
    }, 2000);
}, 5000);

以下是演示：

var data = {

    nodes: [
  	{"x": 250, "y": 250, "color": "green", "name":"TEST", "r":"28", "fixed":true},
    {"x": 120, "y": 150, "name":"forums.macrumors", "score": -12.2, "icon": ""},
    {"x": 140, "y": 150, "name":"delhidailynews", "score": -0.08, "icon": ""},
    {"x": 280, "y": 150, "name":"4-traders", "score": -0.055, "icon": ""},
    {"x": 300, "y": 150, "name":"phonearena", "score": 0.45, "icon": ""},
    {"x": 40, "y": 200, "name":"inga3.wordpress", "score": -0.27, "icon": ""},
    {"x": 70, "y": 200, "name":"kahinaweb.wordpress", "score": -0.28, "icon": ""},
    {"x": 100, "y": 200, "name":"bilqueessite.wordpress", "score": -0.3, "icon": ""},
    {"x": 130, "y": 200, "name":"beforeitsnews", "score": -0.72, "icon": ""},
    {"x": 380, "y": 200, "name":"yahoo", "score": -0.66, "icon": ""}    
    ],
   links: [
    {"source":  0, "target": 1, "distance": 180, "label": ""},
    {"source":  0, "target": 2, "distance": 180, "label": ""},
    {"source":  0, "target": 3, "distance": 180, "label": ""},
    {"source":  0, "target": 4, "distance": 180, "label": ""},
    {"source":  0, "target": 5, "distance": 180, "label": ""},
    {"source":  0, "target": 6, "distance": 180, "label": ""},
    {"source":  0, "target": 7, "distance": 180, "label": ""},
    {"source":  0, "target": 8, "distance": 180, "label": ""},
    {"source":  0, "target": 9, "distance": 180, "label": ""}
   

    
  ]
    };
  
var width = 500,
	height = 500;
var force = d3.layout.force()
	.size([width, height])
	.charge(function(d){
        var charge = -500;
        if (d.index === 0) charge = 10 * charge;
        return charge;
    })
	.linkDistance(d => d.distance)
	.on("tick", tick);

var svg = d3.select("#orb")
	.append("svg")
	.attr("width", width)
	.attr("height", height)
	.attr("class", "mainsvg");
var link = svg.selectAll(".link"),
	node = svg.selectAll(".node"),
	path = svg.selectAll(".path");

force.nodes(data.nodes)
	.links(data.links)
	.start();
var edges = link.data(data.links)
	.enter()
	.append("line")
	.attr("class", "link")
	.style("stroke", "grey")
	.style("pointer-events", "none");
node = node.data(data.nodes)
	.enter()
	.append("g");
node.append("circle")
	.attr("class", "circle")
	.attr("r", function(d) { if(d.r){ return d.r; } else { return "18";} })
	.attr("fill", function(d) { if(d.color) { return d.color; } else { return "orange";} })
	.attr("stroke", function(d) { if(d.color) { return d.color; } else { return "orange";} });
var linkwrap = node.append("a")
	.attr("href", "3");
linkwrap.append("image")
	.attr("class", "srcico")
	.attr("height", "16px")
	.attr("width", "16px")
	.attr("xlink:href", function(d) { return d.icon; });
linkwrap.append("text")
	.attr("fill", "white")
	.attr("stroke", "none")
	.attr("x", "232")
	.attr("y", "255")
    .text(function(d) { return d.ticker; });

function tick() {
	var link = svg.selectAll("line");
	var edgepaths = svg.selectAll(".edgepath");
	var edgelabels = svg.selectAll(".edgelabel");
	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; });

	svg.selectAll(".circle")
		.attr("cx", function(d) { return d.x; })
		.attr("cy", function(d) { return d.y; });
	svg.selectAll(".srcico")
		.attr("x", function(d) { return d.x-5; })
		.attr("y", function(d) { return d.y-8; });
	svg.selectAll(".notecap")
		.attr("x", function(d) { return d.x; })
		.attr("y", function(d) { return d.y; });
}
var inter = setInterval(function() {	
                updateData();
								setTimeout(function(){
									force.linkDistance(20);
									force.start().alpha(0.01);
								},2000);
        }, 5000); 

function updateData() {
var data = {

    nodes: [
  	{"x": 250, "y": 250, "color": "grey", "name":"TEST", "r":"28", "fixed":true},
    {"x": 120, "y": 210, "name":"", "score": -12.2, "icon": ""},
    {"x": 140, "y": 210, "name":"", "score": -0.08, "icon": ""},
    {"x": 280, "y": 210, "name":"", "score": -0.055, "icon": ""},
    {"x": 300, "y": 210, "name":"", "score": 0.45, "icon": ""},
    {"x": 40, "y": 200, "name":"", "score": -0.27, "icon": ""},
    {"x": 70, "y": 200, "name":"", "score": -0.28, "icon": ""},
    {"x": 100, "y": 200, "name":"", "score": -0.3, "icon": ""},
    {"x": 130, "y": 200, "name":"", "score": -0.72, "icon": ""},
    {"x": 380, "y": 200, "name":"", "score": -0.66, "icon": ""},
    {"x": 160, "y": 200, "name":"", "score": -0.317, "icon": ""},
    {"x": 280, "y": 200, "name":"", "score": -0.37, "icon": ""},
    {"x": 270, "y": 200, "name":"", "score": -0.49, "icon": ""},
    {"x": 340, "y": 200, "name":"", "score": -0.62, "icon": ""},
    {"x": 100, "y": 300, "name":"", "score": -0.31, "icon": ""},
    {"x": 140, "y": 300, "name":"", "score": -0.457, "icon": ""},
    {"x": 180, "y": 300, "name":"", "score": -0.472, "icon": ""},
    {"x": 280, "y": 300, "name":"", "score": -0.66, "icon": ""},   
    {"x": 320, "y": 300, "name":"", "score": -0.68, "icon": ""},
    {"x": 410, "y": 300, "name":"", "score": -0.8, "icon": ""},
    {"x": 260, "y": 300, "name":"", "score": -0.86, "icon": ""}
    ],
   links: [
    {"source":  0, "target": 1, "distance": 180, "label": ""},
    {"source":  0, "target": 2, "distance": 180, "label": ""},
    {"source":  0, "target": 3, "distance": 180, "label": ""},
    {"source":  0, "target": 4, "distance": 180, "label": ""},
    {"source":  0, "target": 5, "distance": 180, "label": ""},
    {"source":  0, "target": 6, "distance": 180, "label": ""},
    {"source":  0, "target": 7, "distance": 180, "label": ""},
    {"source":  0, "target": 8, "distance": 180, "label": ""},
    {"source":  0, "target": 9, "distance": 180, "label": ""},
    {"source":  0, "target": 10, "distance": 180, "label": ""},
    {"source":  0, "target": 11, "distance": 180, "label": ""},
    {"source":  0, "target": 12, "distance": 180, "label": ""},
    {"source":  0, "target": 13, "distance": 180, "label": ""},
    {"source":  0, "target": 14, "distance": 180, "label": ""},
    {"source":  0, "target": 15, "distance": 180, "label": ""},
    {"source":  0, "target": 16, "distance": 180, "label": ""},
    {"source":  0, "target": 17, "distance": 180, "label": ""},
    {"source":  0, "target": 18, "distance": 180, "label": ""},
    {"source":  0, "target": 19, "distance": 180, "label": ""},
    {"source":  0, "target": 20, "distance": 180, "label": ""}
  ]
    };

d3.selectAll(".mainsvg > *").remove();

var link = svg.selectAll(".link"),
	node = svg.selectAll(".node"),
	path = svg.selectAll(".path");
	
	force.linkDistance(d=>d.distance);


	force.nodes(data.nodes)
		.links(data.links)
		.start();
	var edges = link.data(data.links)
		.enter()
		.append("line")
		.attr("class", "link")
		.style("stroke", "grey")
		.style("pointer-events", "none");
	node = node.data(data.nodes)
		.enter()
		.append("g");
	node.append("circle")
		.attr("class", "circle")
		.attr("r", function(d) { if(d.r){ return d.r; } else { return "18";} })
		.attr("fill", function(d) { if(d.color) { return d.color; } else { return "orange";} })
		.attr("stroke", function(d) { if(d.color) { return d.color; } else { return "orange";} });
	var linkwrap = node.append("a")
		.attr("href", "3");
	linkwrap.append("image")
	.attr("class", "srcico")
	.attr("height", "16px")
	.attr("width", "16px")
		.attr("xlink:href", function(d) { return d.icon; });
	 linkwrap.append("text")
	 .attr("fill", "white")
	 .attr("stroke", "none")
	 .attr("x", "232")
	 .attr("y", "255")
    .text(function(d) { return d.ticker; });


}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id="orb">
</div>

相关问题
最新问题