【js】d3.v4中的brushX在v3版本中怎么实现_百度知道
【js】d3.v4中的brushX在v3版本中怎么实现
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。当前位置：
(html)D3jsv4 力导向图布局 一定要用tick 方法么才能得到正确地数据坐标点么？
(html)D3jsv4 力导向图布局 一定要用tick 方法么才能得到正确地数据坐标点么？(1/2)
来源：网络整理&&&&&时间: 11:19:14&&&&&关键词:
关于网友提出的“ (html)D3jsv4 力导向图布局 一定要用tick 方法么才能得到正确地数据坐标点么？
”问题疑问，本网通过在网上对“ (html)D3jsv4 力导向图布局 一定要用tick 方法么才能得到正确地数据坐标点么？
”有关的相关答案进行了整理，供用户进行参考，详细问题解答如下：
问题： (html)D3jsv4 力导向图布局 一定要用tick 方法么才能得到正确地数据坐标点么？
描述:Demohttp://codepen.io/jingxiao/pe...
var nodes = [ { name: "BeiJing"
}, { name: "XiaMen" },
{ name: "XiAn"
}, { name: "HangZhou"
{ name: "ShangHai"
}, { name: "QingDao"
{ name: "NanJing"
var links = [
{ source : 0
, target: 1 } , { source : 0
, target: 2 } ,
{ source : 0
, target: 3 } , { source : 1
, target: 4 } ,
{ source : 1
, target: 5 } , { source : 1
, target: 6 }
var width = 800;
var height = 600;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
// 通过布局来转换数据，然后进行绘制
var simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).distance(100))
.force("charge",d3.forceManyBody())
.force("center",d3.forceCenter(width/2, height/2));
var color = d3.scaleOrdinal(d3.schemeCategory20);
var svg_links = svg.selectAll("line")
.data(links)
.append("line")
.style("stroke","#ccc")
.style("stroke-width",3);
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.append("circle")
.attr("r",10)
.style("fill",function(d,i){
return color(i);
.attr("cx",function(d){return d.x;})
.attr("cy",function(d){return d.y;});
var svg_text = svg.selectAll("text")
.data(nodes)
.append("text")
.style("fill","#000")
.attr("dx",20)
.attr("dy",10)
.text(function(d){return d.});
console.log("转换后的nodes links数据:");
console.log(nodes);
console.log(links);
function draw(){
.attr("cx",function(d){console.log(d);return d.x;})
.attr("cy",function(d){return d.y;});
.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
.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; });
simulation.on("tick",draw);
通过力导向图来转换节点nodes和线路links为可绘制的数据，然后去绘制连线图。有个疑问是tick()方法。上述代码中为什么我不能在得到nodes links数据后，直接调用draw() 绘制呢，这个时候的数据有问题，用tick正常，为什么？类似问题Why do we need force.on('tick'.. in d3在console地方 感觉已经得到正确的节点线路坐标数据，然后就可以直接绘制调用draw() 方法把对应的坐标数据绑定到元素上这样应该就ok了，但事实上在demo中注释tick方法调用，直接draw() 得到的结果是这样都跑到左上角去了，事实上此时的坐标点位置并不是刚刚console.log()输出的那些数据。我在draw() 方法中输出了数据比如Beijingz这个点的 坐标位置(0,0),下面节点显示的位置也和之前不对。但我把输出的object展开看数据又是对的。有点懵逼，这是怎么回事呢？tick()方法的作用，我的理解是没到一个时刻都要调用里面的方法更新节点坐标位置。但我只想初始化数据得到可绘制的数据，然后初始化显示，后面的节点拖拽更新自己写方法来做，只是想用力导向图来转换第一次的数据。
上一篇： 下一篇：JavaScript Date 对象
JavaScript Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象的语法：
var myDate=new Date()
注释：Date 对象会自动把当前日期和时间保存为其初始值。
Date 对象属性
返回对创建此对象的 Date 函数的引用。
使您有能力向对象添加属性和方法。
Date 对象方法
返回当日的日期和时间。
从 Date 对象返回一个月中的某一天 (1 ~ 31)。
从 Date 对象返回一周中的某一天 (0 ~ 6)。
从 Date 对象返回月份 (0 ~ 11)。
从 Date 对象以四位数字返回年份。
请使用 getFullYear() 方法代替。
返回 Date 对象的小时 (0 ~ 23)。
返回 Date 对象的分钟 (0 ~ 59)。
返回 Date 对象的秒数 (0 ~ 59)。
返回 Date 对象的毫秒(0 ~ 999)。
返回 1970 年 1 月 1 日至今的毫秒数。
返回本地时间与格林威治标准时间 (GMT) 的分钟差。
根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
根据世界时从 Date 对象返回月份 (0 ~ 11)。
根据世界时从 Date 对象返回四位数的年份。
根据世界时返回 Date 对象的小时 (0 ~ 23)。
根据世界时返回 Date 对象的分钟 (0 ~ 59)。
根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
根据世界时返回 Date 对象的毫秒(0 ~ 999)。
返回日午夜到指定日期（字符串）的毫秒数。
设置 Date 对象中月的某一天 (1 ~ 31)。
设置 Date 对象中月份 (0 ~ 11)。
设置 Date 对象中的年份（四位数字）。
请使用 setFullYear() 方法代替。
设置 Date 对象中的小时 (0 ~ 23)。
设置 Date 对象中的分钟 (0 ~ 59)。
设置 Date 对象中的秒钟 (0 ~ 59)。
设置 Date 对象中的毫秒 (0 ~ 999)。
以毫秒设置 Date 对象。
根据世界时设置 Date 对象中月份的一天 (1 ~ 31)。
根据世界时设置 Date 对象中的月份 (0 ~ 11)。
根据世界时设置 Date 对象中的年份（四位数字）。
根据世界时设置 Date 对象中的小时 (0 ~ 23)。
根据世界时设置 Date 对象中的分钟 (0 ~ 59)。
根据世界时设置 Date 对象中的秒钟 (0 ~ 59)。
根据世界时设置 Date 对象中的毫秒 (0 ~ 999)。
返回该对象的源代码。
把 Date 对象转换为字符串。
把 Date 对象的时间部分转换为字符串。
把 Date 对象的日期部分转换为字符串。
请使用 toUTCString() 方法代替。
根据世界时，把 Date 对象转换为字符串。
根据本地时间格式，把 Date 对象转换为字符串。
根据本地时间格式，把 Date 对象的时间部分转换为字符串。
根据本地时间格式，把 Date 对象的日期部分转换为字符串。
根据世界时返回 1970 年 1 月 1 日 到指定日期的毫秒数。
返回 Date 对象的原始值。理解 Node.js 里的 process.nextTick() - 技术翻译 - 开源中国社区
理解 Node.js 里的 process.nextTick()
【已翻译100%】
英文原文：
推荐于 5年前 (共 5 段, 翻译完成于 06-26)
参与翻译&(1人)&:
有很多人对Node.js里process.nextTick()的用法感到不理解，下面我们就来看一下process.nextTick()到底是什么，该如何使用。
Node.js是单线程的，除了系统IO之外，在它的事件轮询过程中，同一时间只会处理一个事件。你可以把事件轮询想象成一个大的队列，在每个时间点上，系统只会处理一个事件。即使你的电脑有多个CPU核心，你也无法同时并行的处理多个事件。但也就是这种特性使得node.js适合处理I／O型的应用，不适合那种CPU运算型的应用。在每个I／O型的应用中，你只需要给每一个输入输出定义一个回调函数即可，他们会自动加入到事件轮询的处理队列里。当I／O操作完成后，这个回调函数会被触发。然后系统会继续处理其他的请求。
&翻译得不错哦！
在这种处理模式下，process.nextTick()的意思就是定义出一个动作，并且让这个动作在下一个事件轮询的时间点上执行。我们来看一个例子。例子中有一个foo()，你想在下一个时间点上调用他，可以这么做：
function foo() {
console.error('foo');
process.nextTick(foo);
console.error('bar'); 运行上面的代码，你从下面终端打印的信息会看到，"bar"的输出在“foo”的前面。这就验证了上面的说法，foo()是在下一个时间点运行的。
你也可以使用setTimeout()函数来达到貌似同样的执行效果：
setTimeout(foo, 0);
console.log('bar'); 但在内部的处理机制上，process.nextTick()和setTimeout(fn, 0)是不同的，process.nextTick()不是一个单纯的延时，他有更多的
更精确的说，process.nextTick()定义的调用会创建一个新的子堆栈。在当前的栈里，你可以执行任意多的操作。但一旦调用netxTick，函数就必须返回到父堆栈。然后事件轮询机制又重新等待处理新的事件，如果发现nextTick的调用，就会创建一个新的栈。
下面我们来看看，什么情况下使用process.nextTick()：
&翻译得不错哦！
在多个事件里交叉执行CPU运算密集型的任务：
在下面的例子里有一个compute()，我们希望这个函数尽可能持续的执行，来进行一些运算密集的任务。
但与此同时，我们还希望系统不要被这个函数堵塞住，还需要能响应处理别的事件。这个应用模式就像一个单线程的web服务server。在这里我们就可以使用process.nextTick()来交叉执行compute()和正常的事件响应。
var http = require('http');
function compute() {
// performs complicated calculations continuously
process.nextTick(compute);
http.createServer(function(req, res) {
res.writeHead(200, {'Content-Type': 'text/plain'});
res.end('Hello World');
}).listen(5000, '127.0.0.1');
compute();
在这种模式下，我们不需要递归的调用compute()，我们只需要在事件循环中使用process.nextTick()定义compute()在下一个时间点执行即可。在这个过程中，如果有新的http请求进来，事件循环机制会先处理新的请求，然后再调用compute()。反之，如果你把compute()放在一个递归调用里，那系统就会一直阻塞在compute()里，无法处理新的http请求了。你可以自己试试。
当然，我们无法通过process.nextTick()来获得多CPU下并行执行的真正好处，这只是模拟同一个应用在CPU上分段执行而已。
&翻译得不错哦！
保持回调函数异步执行的原则
当你给一个函数定义一个回调函数时，你要确保这个回调是被异步执行的。下面我们看一个例子，例子中的回调违反了这一原则：
function asyncFake(data, callback) {
if(data === 'foo') callback(true);
else callback(false);
asyncFake('bar', function(result) {
// this callback is actually called synchronously!
}); 为什么这样不好呢？我们来看Node.js
里一段代码：
var client = net.connect(8124, function() {
console.log('client connected');
client.write('world!\r\n');
在上面的代码里，如果因为某种原因，net.connect()变成同步执行的了，回调函数就会被立刻执行，因此回调函数写到客户端的变量就永远不会被初始化了。
这种情况下我们就可以使用process.nextTick()把上面asyncFake()改成异步执行的：
function asyncReal(data, callback) {
process.nextTick(function() {
callback(data === 'foo');
&翻译得不错哦！
用在事件触发过程中
来看一个例子，你想写一个库实现这样的功能：从源文件里读取数据，当读取完毕后，触发一个事件同时传递读取的数据。可能你会这样写：
var EventEmitter = require('events').EventE
function StreamLibrary(resourceName) {
this.emit('start');
// read from the file, and for every chunk read, do:
this.emit('data', chunkRead);
StreamLibrary.prototype.__proto__ = EventEmitter.
// inherit from EventEmitter 下面是一段调用这个库的客户端程序，我们想在程序中监听这些事件：
var stream = new StreamLibrary('fooResource');
stream.on('start', function() {
console.log('Reading has started');
stream.on('data', function(chunk) {
console.log('Received: ' + chunk);
但是上面的代码中，将永远接收不到“start”事件，因为在这个库实例化的时候，“start”事件会被立刻触发执行，但此时事件的回调函数还没有准备好，所以在客户端根本无法接收到这个事件。同样，我们可以用process.nextTick()来改写事件触发的过程，下面是一个正确的版本：
function StreamLibrary(resourceName) {
var self =
process.nextTick(function() {
self.emit('start');
// read from the file, and for every chunk read, do:
this.emit('data', chunkRead);
} 这就是process.nextTick()的基本用法，如果还有疑问，可以留言讨论。
&翻译得不错哦！
我们的翻译工作遵照 ，如果我们的工作有侵犯到您的权益，请及时联系我们
data是接受数据的时候才触发的啊
var http = require(&http&);function compute() {
console.log(&computing....&);
process.nextTick(compute);}http.createServer(function (request, response) {
console.log(&new request...&);
response.writeHead(200, {&Content-Type&: &text/plain&});
response.end(&hello world&);}).listen(5000, &127.0.0.1&);compute();
引用来自“lanzhoulei”的评论var http = require(&http&);function compute() {
console.log(&computing....&);
process.nextTick(compute);}http.createServer(function (request, response) {
console.log(&new request...&);
response.writeHead(200, {&Content-Type&: &text/plain&});
response.end(&hello world&);}).listen(5000, &127.0.0.1&);compute();事件被阻塞了，详细可以看看node.js对process.nextticket函数的说明中解释了该功能相当于while(true) loop下次自动登录
现在的位置:
& 综合 & 正文
【D3.V3.js数据可视化系列教程】（三十）–力导向图之带文字
//(1)链接数组
var links = [
{source: "Microsoft", target: "Amazon", type: "licensing"
,weight:1,color:1},
{source: "Microsoft", target: "HTC", type: "licensing"
,weight:3,color:4},
{source: "Samsung", target: "Apple", type: "suit"
,weight:4,color:6},
{source: "Motorola", target: "Apple", type: "suit"
,weight:6,color:65},
{source: "Nokia", target: "Apple", type: "resolved"
,weight:3,color:76},
{source: "HTC", target: "Apple", type: "suit"
,weight:8,color:879},
{source: "Kodak", target: "Apple", type: "suit"
,weight:7,color:989},
{source: "Microsoft", target: "Barnes & Noble", type: "suit" ,weight:9,color:643},
{source: "Microsoft", target: "Foxconn", type: "suit"
,weight:1,color:54},
{source: "Oracle", target: "Google", type: "suit"
,weight:3,color:54},
{source: "Apple", target: "HTC", type: "suit"
,weight:4,color:45},
{source: "Microsoft", target: "Inventec", type: "suit"
,weight:0,color:43},
{source: "Samsung", target: "Kodak", type: "resolved"
,weight:8,color:243},
{source: "LG", target: "Kodak", type: "resolved"
,weight:1,color:43},
{source: "RIM", target: "Kodak", type: "suit"
,weight:5,color:13},
{source: "Sony", target: "LG", type: "suit"
,weight:3,color:351},
{source: "Kodak", target: "LG", type: "resolved"
,weight:4,color:1},
{source: "Apple", target: "Nokia", type: "resolved"
,weight:1,color:1},
{source: "Qualcomm", target: "Nokia", type: "resolved"
,weight:3,color:4},
{source: "Apple", target: "Motorola", type: "suit"
,weight:4,color:6},
{source: "Microsoft", target: "Motorola", type: "suit"
,weight:6,color:65},
{source: "Motorola", target: "Microsoft", type: "suit"
,weight:3,color:76},
{source: "Huawei", target: "ZTE", type: "suit"
,weight:8,color:879},
{source: "Ericsson", target: "ZTE", type: "suit"
,weight:7,color:989},
{source: "Kodak", target: "Samsung", type: "resolved"
,weight:9,color:643},
{source: "Apple", target: "Samsung", type: "suit"
,weight:1,color:54},
{source: "Kodak", target: "RIM", type: "suit"
,weight:3,color:54},
{source: "Nokia", target: "Qualcomm", type: "suit"
,weight:4,color:45}
var nodes = {};
//(2)从链接中分离出不同的节点
//一个小问题：节点的weight属性怎么产生的？
links.forEach(function(link) {
//思路就是：在连接中遍历链接，节点数组有了这个链接的源节点就把链接指向这个节点。没有的话把链接上的节点加到链接数组指定名称name属性，并把链接指向这个节点
console.log(nodes);
link.source = nodes[link.source] //link.sourc就是节点值比如Apple
|| (nodes[link.source] = {name: link.source});//(填加节点数据)
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
//(3)为链接添加线
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var colors=d3.scale.category20();
link.style("stroke",function(d){//
设置线的颜色
return colors(d.color);
.style("stroke-width",function(d,i){//设置线的宽度
//(4)为链接添加节点
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
radius (d){
if(!d.weight){//节点weight属性没有值初始化为1（一般就是叶子了）
d.weight=1;
return Math.log(d.weight)*10;
node.append("circle")
.attr("r",function(d){
//设置圆点半径
return radius (d);
.style("fill",function(d){ //设置圆点的颜色
return colors(d.weight*d.weight*d.weight);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d. });
function tick() {//打点更新坐标
.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; });
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//设置圆点半径
return radius (d)+10;
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//恢复圆点半径
return radius (d);
&!DOCTYPE html&
&meta charset="utf-8"&
&title&testD3-27-textforce.html&/title&
&script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"&&/script&
&style type="text/css"&
&script type="text/javascript"&
//(1)链接数组
var links = [
{source: "Microsoft", target: "Amazon", type: "licensing"
,weight:1,color:1},
{source: "Microsoft", target: "HTC", type: "licensing"
,weight:3,color:4},
{source: "Samsung", target: "Apple", type: "suit"
,weight:4,color:6},
{source: "Motorola", target: "Apple", type: "suit"
,weight:6,color:65},
{source: "Nokia", target: "Apple", type: "resolved"
,weight:3,color:76},
{source: "HTC", target: "Apple", type: "suit"
,weight:8,color:879},
{source: "Kodak", target: "Apple", type: "suit"
,weight:7,color:989},
{source: "Microsoft", target: "Barnes & Noble", type: "suit" ,weight:9,color:643},
{source: "Microsoft", target: "Foxconn", type: "suit"
,weight:1,color:54},
{source: "Oracle", target: "Google", type: "suit"
,weight:3,color:54},
{source: "Apple", target: "HTC", type: "suit"
,weight:4,color:45},
{source: "Microsoft", target: "Inventec", type: "suit"
,weight:0,color:43},
{source: "Samsung", target: "Kodak", type: "resolved"
,weight:8,color:243},
{source: "LG", target: "Kodak", type: "resolved"
,weight:1,color:43},
{source: "RIM", target: "Kodak", type: "suit"
,weight:5,color:13},
{source: "Sony", target: "LG", type: "suit"
,weight:3,color:351},
{source: "Kodak", target: "LG", type: "resolved"
,weight:4,color:1},
{source: "Apple", target: "Nokia", type: "resolved"
,weight:1,color:1},
{source: "Qualcomm", target: "Nokia", type: "resolved"
,weight:3,color:4},
{source: "Apple", target: "Motorola", type: "suit"
,weight:4,color:6},
{source: "Microsoft", target: "Motorola", type: "suit"
,weight:6,color:65},
{source: "Motorola", target: "Microsoft", type: "suit"
,weight:3,color:76},
{source: "Huawei", target: "ZTE", type: "suit"
,weight:8,color:879},
{source: "Ericsson", target: "ZTE", type: "suit"
,weight:7,color:989},
{source: "Kodak", target: "Samsung", type: "resolved"
,weight:9,color:643},
{source: "Apple", target: "Samsung", type: "suit"
,weight:1,color:54},
{source: "Kodak", target: "RIM", type: "suit"
,weight:3,color:54},
{source: "Nokia", target: "Qualcomm", type: "suit"
,weight:4,color:45}
var nodes = {};
//(2)从链接中分离出不同的节点
//一个小问题：节点的weight属性怎么产生的？
links.forEach(function(link) {
//思路就是：在连接中遍历链接，节点数组有了这个链接的源节点就把链接指向这个节点。没有的话把链接上的节点加到链接数组指定名称name属性，并把链接指向这个节点
console.log(nodes);
link.source = nodes[link.source] //link.sourc就是节点值比如Apple
|| (nodes[link.source] = {name: link.source});//(填加节点数据)
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
var width = 960,
height = 500;
var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(60)
.charge(-300)
.on("tick", tick)
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
//(3)为链接添加线
var link = svg.selectAll(".link")
.data(force.links())
.enter().append("line")
.attr("class", "link");
var colors=d3.scale.category20();
link.style("stroke",function(d){//
设置线的颜色
return colors(d.color);
.style("stroke-width",function(d,i){//设置线的宽度
//(4)为链接添加节点
var node = svg.selectAll(".node")
.data(force.nodes())
.enter().append("g")
.attr("class", "node")
.on("mouseover", mouseover)
.on("mouseout", mouseout)
.call(force.drag);
//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
radius (d){
if(!d.weight){//节点weight属性没有值初始化为1（一般就是叶子了）
d.weight=1;
return Math.log(d.weight)*10;
node.append("circle")
.attr("r",function(d){
//设置圆点半径
return radius (d);
.style("fill",function(d){ //设置圆点的颜色
return colors(d.weight*d.weight*d.weight);
node.append("text")
.attr("x", 12)
.attr("dy", ".35em")
.text(function(d) { return d. });
function tick() {//打点更新坐标
.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; });
.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//设置圆点半径
return radius (d)+10;
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", function(d){
//恢复圆点半径
return radius (d);
【上篇】【下篇】