javascript - D3.js 动画更新

标签 javascript d3.js

我正在处理这样的事情:

Fiddle

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

最佳答案

有几种方法可以做到你想要的，但这是我的解决方案:用较小的 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>

关于javascript - D3.js 动画更新，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41475286/

上一篇：javascript - 使用一对对象作为键，将它们传递给其属性的构造函数，无需哈希层

下一篇：javascript - 在加载视频之前用js设置按钮淡出

相关文章：

javascript - 如何动态决定并告诉 d3.json() 函数何时采用哪个 json

javascript - 单击或鼠标悬停交互式图例 - D3js

javascript - 在html文本框中，如何显示本身包含 ""符号的值？

JavaScript/jQuery - onhashchange 事件解决方法

javascript - 如何将嵌套 JSON 树的所有节点转换为 Angular 2 Typescript 中的类实例？

d3.js - 是否可以消除 d3.zoom 回调？

javascript - 如何保证一个html页面上所有的元素都加载完毕，然后我们在CSS中对元素进行一些修改呢？

javascript - three.js中作为场景背景保持比例的纹理

javascript - 使用 D3.JS 访问同一网站上的 API 端点

javascript - 在 D3 转换中使用 CSS 值

©2024 IT工具网  联系我们