如何在d3图形中将大小显示为工具提示? [英] How to display the size as tooltip in a d3 graph?
本文介绍了如何在d3图形中将大小显示为工具提示?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我已经完成了d3小部件,该小部件可以正常工作,现在需要在工具提示中显示尺寸.我尝试将mouseover事件附加到节点,这似乎不起作用.这是我的代码:
I have done a d3 widget which works fine, now needs to show the size as tooltip. I have tried attaching mouseover event to the node, that does not seems to work. here is my code:
var width = 460,
height = 300;
var color = d3.scale.category20();
var radius = d3.scale.sqrt()
.range([0, 3]);
var svg = d3.select("#mdView").append("svg")
.attr("viewBox", "0 0 460 300 ")
.attr("width", '100%')
.attr("height", '100%');
var force = d3.layout.force()
.size([width, height])
.charge(-300)
.linkDistance(function(d) {
return radius(d.source.size) + radius(d.target.size) + 20;
});
d3.json("views/graph.json", function(error, graph) {
if (error) throw error;
force
.nodes(graph.nodes)
.links(graph.links)
.on("tick", tick)
.start();
var tooltip = d3.select("#chart")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden");
tooltip.append("div")
.attr("id", "tt-name")
.text("simple");
var link = svg.selectAll(".link")
.data(graph.links)
.enter().append("g")
.attr("class", "link");
link.append("line")
.style("stroke-width", function(d) {
return (d.bond * 2 - 1) * 2 + "px";
});
link.filter(function(d) {
return d.bond > 1;
}).append("line")
.attr("class", "separator");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("circle")
.attr("r", function(d) {
return radius(d.size);
})
.style("fill", function(d) {
return color(d.skill);
});
node.append("text")
.attr("dy", ".35em")
.attr("text-anchor", "margin-left")
.text(function(d) {
return d.skill;
});
function tick() {
link.selectAll("line")
.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("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
}
});
工作 JSFIDDLE
推荐答案
我试图通过编辑脚本为您提供一些起点,..请看看
I tried to give you some starting point by editing your script,.. please take a look
// NOTE : please add position:relative to #mdView html element.
var tooltip = d3.select("#mdView") // changed the selector
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("padding", "10px")
.style("background-color", "#333")
.style("border-radius", "5px")
.style("color", "#fff")
.style("opacity", "0");
var node = svg.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.call(force.drag)
/* Added these two events */
.on('mousemove',function(d,i){
console.log(d);
tooltip
.style('top',d.y+'px')
.style('left',d.x+'px')
.style('opacity',1)
.html('size : '+d.size);
}).on('mouseleave',function(){
tooltip
.style('opacity',0)
.html('');
});
请记住,这只是您的起点,如果您需要更多帮助,请询问.
Please keep in mind this is just a starter point for you , If you need more help please just ask.
希望有帮助.
这篇关于如何在d3图形中将大小显示为工具提示?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文