1
我想在JS中創建一個Websocket，當我點擊D3中的一個節點時，它傳遞給我的變量。我創建了大部分代碼以使用靜態數據，但我無法找到一種方法來啓動代碼，當我點擊節點以獲取「用戶信息」時，我排除了實際的wsUri我正在尋找的是如何在D3節點上從OnClick獲取變量，然後將該「用戶名」作爲變量傳遞，並將數據放回WebSocket以顯示。D3使用Websocket的OnClick（）處理程序
的WebSocket：
var jsonObject = "";
var username = "test_123";
function init() {
testWebSocket();
}
function testWebSocket() {
websocket = new WebSocket(wsUri);
websocket.onopen = function(evt) {
onOpen(evt)
};
websocket.onclose = function(evt) {
onClose(evt)
};
websocket.onmessage = function(evt) {
onMessage(evt)
testObject();
};
websocket.onerror = function(evt) {
onError(evt)
};
}
function onOpen(evt) {
console.log("CONNECTED");
doSend('{"request":"getTweetRelationshipGraphForUser", "screen_name" : }');
}
function onClose(evt) {
console.log("DISCONNECTED");
}
function onMessage(evt) {
console.log("Message: " + evt.data);
jsonObject = evt.data;
console.log("json object: "+jsonObject);
return jsonObject;
// websocket.close();
}
function onError(evt) {
console.log("Error:" + evt.data);
}
function doSend(message) {
console.log("SENT: " + message);
websocket.send(message);
}
function testObject(){
document.getElementById("test").innerHTML = jsonObject;
console.log(jsonObject);
}
window.addEventListener("load", init, false);
D3的Javascript
function start() {
var w = 1200,
h = 600,
radius = 10,
node,
link,
root;
var count = 0;
var force = d3.layout.force()
.on("tick", tick)
.charge(function (d) {
return -500;
})
.linkDistance(function (d) {
return d.target._children ? 100 : 50;
})
.size([w, h - 160]);
var svg = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
svg.append("rect")
.attr("width", "100%")
.attr("height", "100%")
.attr("fill", "#000");
root = JSON.parse(jsonObject);
console.log("root" + root);
root.fixed = true;
root.x = w/2;
root.y = h/2 - 80;
update();
function update() {
var nodes = root.nodes,
links = root.links;
// Restart the force layout.
force
.nodes(nodes)
.links(links)
.start();
// Update the links…
link = svg.selectAll(".link")
.data(links);
// Enter any new links.
link.enter().insert("svg:line", ".node")
.attr("class", "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;
});
// Exit any old links.
link.exit().remove();
// Update the nodes…
node = svg.selectAll("circle.node")
.data(nodes, function (d) {
return d.name;
})
.style("fill", color);
node.transition()
.attr("r", radius);
// Enter any new nodes.
node.enter().append("svg:circle")
.attr("xlink:href", function (d) {
return d.image;
})
.attr("class", "node")
.attr("cx", function (d) {
return d.x;
})
.attr("cy", function (d) {
return d.y;
})
.attr("r", radius)
.attr("r", function (d) {
return d.size * 2;
})
.style("fill", color)
.on("click", click)
.call(force.drag);
node.append("title")
.text(function (d) {
return d.name;
});
// Exit any old nodes.
node.exit().remove();
title = svg.selectAll("text.title")
.data(nodes);
// Enter any new titles.
title.enter()
.append("text")
.attr("class", "title");
//.text(function(d) { return d.name; });
// Exit any old titles.
title.exit().remove();
}
function tick() {
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;
});
title.attr("transform", function (d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
// Color leaf nodes orange, and packages white or blue.
function color(d) {
if (d._children) {
return "#95a5a6";
} else {
switch (d.group) {
case 'r': //adverb
return "#e74c3c";
break;
case 'n': //noun
return "#3498db";
break;
case 'v': //verb
return "#2ecc71";
break;
case 's': //adjective
return "#e78229";
break;
default:
return "rgb(0, 238, 238)";
}
}
}
// Toggle children on click.
function click(d) {
document.getElementById("image").src = d.image;
document.getElementById("username").innerHTML = "Username:" + d.name;
document.getElementById("id").innerHTML = "ID:" + d.id;
document.getElementById("friends").innerHTML = d.friend;
document.getElementById("nodeTitle").innerHTML = "";
document.getElementById("size").innerHTML = d.size;
//document.getElementById("id").innerHTML = "Friend Count:" + d.name;
//if (d._children)
//grabImage();
//document.getElementById("image").innerHTML = (d.image);
/*if (d.children) {
d._children = d.children;
d.children = null;
} else {
d.children = d._children;
d._children = null;
}
update();*/
}
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 16);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 8);
}
// Returns a list of all nodes under the root.
function flatten(root) {
var nodes = [], i = 0;
function recurse(node) {
if (node.children) node.size = node.children.reduce(function (p, v) {
return p + recurse(v);
}, 0);
if (!node.id) node.id = ++i;
nodes.push(node);
return node.size;
}
root.size = recurse(root);
return nodes;
}
}
do {
var intervalID = window.setTimeout(start, 1000)
} while (jsonObject != "") {
}
在任何歧義的情況下，只是讓我知道。 –
你很曖昧。我試圖讓用戶點擊一個運行websocket的節點，每次爲每個點擊的獨特節點提取數據，並在請求中傳遞「screename」作爲變量來返回有關它們的信息。 – user2402107
一個screenname將與每個節點相關聯？ –