d3工具提示未显示 [英] d3 tooltips not showing up
本文介绍了d3工具提示未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
开始探索D3进行我的一些工作.尝试通过d3向网络图添加工具提示，但是在四处搜寻并尝试了不同的解决方案后，它仍然拒绝显示...
Start exploring D3 for some of my work.Try to add tooltips to a network graph by d3, but after searching around and tried different solutions, it still refused to show up ...
desc:使用d3(在线)的图形
desc: a graph using d3 (get online)
添加工具提示:
-
在CSS中添加样式
add style in CSS
.tooltip {
position: absolute;
opacity: 0;
visibility: hidden;
width: 300 px;
height: 200 px;
padding: 2 px;
font: 12 px sans - serif;
background: red;
border: 0 px;
border - radius: 8 px;
z - index: 50;
pointer - events: none;
}
初始化工具提示块(没有尝试使用append('g')在svg中添加工具提示，但不走运
initialized a tooltip block (did try to add tooltip in svg using append('g'), no luck'
var tooltip = d3.select('body').append("div")
.attr("class", "tooltip")
.attr("width", 300)
.attr("height", 200)
//.style("opacity", .1);
在移至节点时显示.(尝试不透明"和展示"，不走运.)
show it when moveover to a node. (Tries 'opacity' as well as 'display', no luck. )
tooltipStats.html('<p> OK. I show up </p>')
tooltip.style("left", (d3.event.pageX + 15) + 'px')
.style("top", (d3.event.pageY - 30) + 'px')
//.style("opacity", .9)
.style('display', 'block')
.transition()
.duration(200);
外出时隐藏
hide when moving out
tooltip.style("block", 'none');
我没有尝试仅在没有子元素tooltipStats的情况下使用Tooltip.没有运气.
I did try not using tooltip only without a child element tooltipStats. No luck.
我看到的大多数工作示例都在执行这些步骤.但是为什么我的行不通...任何人都可以帮助指出我做错了什么地方? http://jsfiddle.net/kt67vjvv/2/
Most working examples I saw are doing these steps. But why mine does not work.... anyone can help point out where I did wrong? http://jsfiddle.net/kt67vjvv/2/
graph = {
"nodes":[
{"name":"1","rating":90,"id":2951},
{"name":"2","rating":80,"id":654654},
{"name":"3","rating":80,"id":6546544},
{"name":"4","rating":1,"id":68987978},
{"name":"5","rating":1,"id":9878933},
{"name":"6","rating":1,"id":6161},
{"name":"7","rating":1,"id":64654},
{"name":"8","rating":20,"id":354654},
{"name":"9","rating":50,"id":8494},
{"name":"10","rating":1,"id":6846874},
{"name":"11","rating":1,"id":5487},
{"name":"12","rating":80,"id":"parfum_kenzo"},
{"name":"13","rating":1,"id":65465465},
{"name":"14","rating":90,"id":"jungle_de_kenzo"},
{"name":"15","rating":20,"id":313514},
{"name":"16","rating":40,"id":36543614},
{"name":"17","rating":100,"id":"Yann_YA645"},
{"name":"18","rating":1,"id":97413},
{"name":"19","rating":1,"id":97414},
{"name":"20","rating":100,"id":976431231},
{"name":"21","rating":1,"id":9416},
{"name":"22","rating":1,"id":998949},
{"name":"23","rating":100,"id":984941},
{"name":"24","rating":100,"id":"99843"},
{"name":"25","rating":1,"id":94915},
{"name":"26","rating":1,"id":913134},
{"name":"27","rating":1,"id":9134371}
],
"links":[
{"source":6,"target":5,"value":6, "label":"publishedOn"},
{"source":8,"target":5,"value":6, "label":"publishedOn"},
{"source":1,"target":7,"value":4, "label":"containsKeyword"},
{"source":8,"target":10,"value":3, "label":"containsKeyword"},
{"source":7,"target":14,"value":4, "label":"publishedBy"},
{"source":8,"target":15,"value":6, "label":"publishedBy"},
{"source":9,"target":1,"value":6, "label":"depicts"},
{"source":10,"target":1,"value":6, "label":"depicts"},
{"source":16,"target":1,"value":6, "label":"manageWebsite"},
{"source":16,"target":2,"value":5, "label":"manageWebsite"},
{"source":16,"target":3,"value":6, "label":"manageWebsite"},
{"source":16,"target":4,"value":6, "label":"manageWebsite"},
{"source":19,"target":18,"value":2, "label":"postedOn"},
{"source":18,"target":1,"value":6, "label":"childOf"},
{"source":17,"target":19,"value":8, "label":"describes"},
{"source":18,"target":11,"value":6, "label":"containsKeyword"},
{"source":17,"target":13,"value":3, "label":"containsKeyword"},
{"source":20,"target":13,"value":3, "label":"containsKeyword"},
{"source":20,"target":21,"value":3, "label":"postedOn"},
{"source":22,"target":20,"value":3, "label":"postedOn"},
{"source":23,"target":21,"value":3, "label":"manageWebsite"},
{"source":23,"target":24,"value":3, "label":"manageWebsite"},
{"source":23,"target":25,"value":3, "label":"manageWebsite"},
{"source":23,"target":26,"value":3, "label":"manageWebsite"}
]
}
var margin = {top: 5, right: 15, bottom: 15, left: 5};
var width = 1865 - margin.left - margin.right,
height = 933 - margin.top - margin.bottom;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-200)
.linkDistance(50)
.size([width - margin.left - margin.right, height - margin.top - margin.bottom]);
var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 6]) // how large scale it can be zoomed
.on("zoom", zoomed);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var svg = d3.select("#map").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
.call(zoom);
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all");
var container = svg.append("g");
var tooltip = d3.select('body').append("div")
.attr("class", "tooltip")
.attr("width", 300)
.attr("height", 200)
//.style("opacity", .1);
var tooltipStats = tooltip.append('div')
.attr('class', 'stats');
/*
d3.json('https://d3js.org/world-50m.v1.json', function(data) {
container.selectAll('path')
.data(topojson.feature(data, data.objects.countries).features)
.enter()
.append('path')
.attr('fill', '#5bc0de')
.attr('stroke', '#1992be')
.attr('d', path)
});
*/
// d3.json('/data_3.json', function(graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = container.append("g")
.attr("class", "links")
.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);
node.append("circle")
.attr("r", function(d) { return d.weight + 10; })
.style("fill", function(d) { return color(1/d.rating); });
force.on("tick", function() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
var linkedByIndex = {};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}
node.on("mouseover", function(d){
//alert(JSON.stringify(d))
tooltipStats.html('<p> Please show up </p>')
tooltip.style("left", (d3.event.pageX + 15) + 'px')
.style("top", (d3.event.pageY - 30) + 'px')
//.style("opacity", .9)
.style('display', 'block')
.transition()
.duration(200);
node.classed("node-active", function(o) {
thisOpacity = isConnected(d, o) ? true : false;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.classed("link-active", function(o) {
return o.source === d || o.target === d ? true : false;
});
d3.select(this).classed("node-active", true);
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", (d.weight + 10)*1.5);
console.log("X: " + d3.event.pageX + " Y: " + d3.event.pageY + " tip:" + tooltip.text())
})
.on("mouseout", function(d){
tooltip.style("block", 'none');
node.classed("node-active", false);
link.classed("link-active", false);
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", d.weight + 10);
});
// });
function dottype(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
force.start();
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}.node {
stroke: #fff;
stroke-width: 1.5px;
}
.node-active{
stroke: #555;
stroke-width: 1.5px;
}
.link {
stroke: #555;
stroke-opacity: .3;
}
.link-active {
stroke-opacity: 1;
}
.overlay {
fill: none;
pointer-events: all;
}
#map{
width:1865px;
height:900px;
}
.tooltip {
position: absolute;
opacity: 0;
visibility: hidden;
width: 300px;
height: 200px;
padding: 2px;
font: 12px sans-serif;
background: red;
border: 0px;
border-radius: 8px;
z-index: 50;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<body>
<div id="map">
</div>
</body>推荐答案
您的代码中有几个问题.首先，您将可见性设置为 hidden ，但是在鼠标悬停时永远不要将其设置为 visible .除此之外，您还可以将不透明度设置为 0 ，但也不要在鼠标悬停时更改它.最后，最重要的是:您永远都不会设置要在工具提示中显示的文本.
You have a couple of issues in your code. First, you set the visibility to hidden, but you never set it to visible in the mouseover. Besides that, you set the opacity to 0, but never changed it in the mouseover as well. Finally, the most important thing: you never set the text to show up in the tooltip.
您只需要为工具提示设置其中之一即可显示/隐藏，并使用 html()设置文本.这是更改不透明度的代码:
You just need to set one of those for the tooltip to show/hide, and set the text with html(). Here is your code changing the opacity:
graph = {
"nodes":[
{"name":"1","rating":90,"id":2951},
{"name":"2","rating":80,"id":654654},
{"name":"3","rating":80,"id":6546544},
{"name":"4","rating":1,"id":68987978},
{"name":"5","rating":1,"id":9878933},
{"name":"6","rating":1,"id":6161},
{"name":"7","rating":1,"id":64654},
{"name":"8","rating":20,"id":354654},
{"name":"9","rating":50,"id":8494},
{"name":"10","rating":1,"id":6846874},
{"name":"11","rating":1,"id":5487},
{"name":"12","rating":80,"id":"parfum_kenzo"},
{"name":"13","rating":1,"id":65465465},
{"name":"14","rating":90,"id":"jungle_de_kenzo"},
{"name":"15","rating":20,"id":313514},
{"name":"16","rating":40,"id":36543614},
{"name":"17","rating":100,"id":"Yann_YA645"},
{"name":"18","rating":1,"id":97413},
{"name":"19","rating":1,"id":97414},
{"name":"20","rating":100,"id":976431231},
{"name":"21","rating":1,"id":9416},
{"name":"22","rating":1,"id":998949},
{"name":"23","rating":100,"id":984941},
{"name":"24","rating":100,"id":"99843"},
{"name":"25","rating":1,"id":94915},
{"name":"26","rating":1,"id":913134},
{"name":"27","rating":1,"id":9134371}
],
"links":[
{"source":6,"target":5,"value":6, "label":"publishedOn"},
{"source":8,"target":5,"value":6, "label":"publishedOn"},
{"source":1,"target":7,"value":4, "label":"containsKeyword"},
{"source":8,"target":10,"value":3, "label":"containsKeyword"},
{"source":7,"target":14,"value":4, "label":"publishedBy"},
{"source":8,"target":15,"value":6, "label":"publishedBy"},
{"source":9,"target":1,"value":6, "label":"depicts"},
{"source":10,"target":1,"value":6, "label":"depicts"},
{"source":16,"target":1,"value":6, "label":"manageWebsite"},
{"source":16,"target":2,"value":5, "label":"manageWebsite"},
{"source":16,"target":3,"value":6, "label":"manageWebsite"},
{"source":16,"target":4,"value":6, "label":"manageWebsite"},
{"source":19,"target":18,"value":2, "label":"postedOn"},
{"source":18,"target":1,"value":6, "label":"childOf"},
{"source":17,"target":19,"value":8, "label":"describes"},
{"source":18,"target":11,"value":6, "label":"containsKeyword"},
{"source":17,"target":13,"value":3, "label":"containsKeyword"},
{"source":20,"target":13,"value":3, "label":"containsKeyword"},
{"source":20,"target":21,"value":3, "label":"postedOn"},
{"source":22,"target":20,"value":3, "label":"postedOn"},
{"source":23,"target":21,"value":3, "label":"manageWebsite"},
{"source":23,"target":24,"value":3, "label":"manageWebsite"},
{"source":23,"target":25,"value":3, "label":"manageWebsite"},
{"source":23,"target":26,"value":3, "label":"manageWebsite"}
]
}
var margin = {top: 5, right: 15, bottom: 15, left: 5};
var width = 1865 - margin.left - margin.right,
height = 933 - margin.top - margin.bottom;
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-200)
.linkDistance(50)
.size([width - margin.left - margin.right, height - margin.top - margin.bottom]);
var zoom = d3.behavior.zoom()
.scaleExtent([0.1, 6]) // how large scale it can be zoomed
.on("zoom", zoomed);
var drag = d3.behavior.drag()
.origin(function(d) { return d; })
.on("dragstart", dragstarted)
.on("drag", dragged)
.on("dragend", dragended);
var svg = d3.select("#map").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.right + ")")
.call(zoom);
var rect = svg.append("rect")
.attr("width", width)
.attr("height", height)
.style("fill", "none")
.style("pointer-events", "all");
var container = svg.append("g");
var tooltip = d3.select('body').append("div")
.attr("class", "tooltip");
var tooltipStats = tooltip.append('div')
.attr('class', 'stats');
/*
d3.json('https://d3js.org/world-50m.v1.json', function(data) {
container.selectAll('path')
.data(topojson.feature(data, data.objects.countries).features)
.enter()
.append('path')
.attr('fill', '#5bc0de')
.attr('stroke', '#1992be')
.attr('d', path)
});
*/
// d3.json('/data_3.json', function(graph) {
force
.nodes(graph.nodes)
.links(graph.links)
.start();
var link = container.append("g")
.attr("class", "links")
.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function(d) { return Math.sqrt(d.value); });
var node = container.append("g")
.attr("class", "nodes")
.selectAll(".node")
.data(graph.nodes)
.enter().append("g")
.attr("class", "node")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.call(drag);
node.append("circle")
.attr("r", function(d) { return d.weight + 10; })
.style("fill", function(d) { return color(1/d.rating); });
force.on("tick", function() {
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("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
var linkedByIndex = {};
graph.links.forEach(function(d) {
linkedByIndex[d.source.index + "," + d.target.index] = 1;
});
function isConnected(a, b) {
return linkedByIndex[a.index + "," + b.index] || linkedByIndex[b.index + "," + a.index];
}
node.on("mouseover", function(d){
//alert(JSON.stringify(d))
tooltipStats.html('<p> Please show up </p>')
tooltip.html("I am a tooltip")
.style("left", (d3.event.pageX + 15) + 'px')
.style("top", (d3.event.pageY - 30) + 'px')
.style("opacity", .9)
.transition()
.duration(200);
node.classed("node-active", function(o) {
thisOpacity = isConnected(d, o) ? true : false;
this.setAttribute('fill-opacity', thisOpacity);
return thisOpacity;
});
link.classed("link-active", function(o) {
return o.source === d || o.target === d ? true : false;
});
d3.select(this).classed("node-active", true);
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", (d.weight + 10)*1.5);
})
.on("mouseout", function(d){
tooltip.style("opacity", 0);
node.classed("node-active", false);
link.classed("link-active", false);
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", d.weight + 10);
});
// });
function dottype(d) {
d.x = +d.x;
d.y = +d.y;
return d;
}
function zoomed() {
container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")");
}
function dragstarted(d) {
d3.event.sourceEvent.stopPropagation();
d3.select(this).classed("dragging", true);
force.start();
}
function dragged(d) {
d3.select(this).attr("cx", d.x = d3.event.x).attr("cy", d.y = d3.event.y);
}
function dragended(d) {
d3.select(this).classed("dragging", false);
}.node {
stroke: #fff;
stroke-width: 1.5px;
}
.node-active{
stroke: #555;
stroke-width: 1.5px;
}
.link {
stroke: #555;
stroke-opacity: .3;
}
.link-active {
stroke-opacity: 1;
}
.overlay {
fill: none;
pointer-events: all;
}
#map{
width:1865px;
height:900px;
}
.tooltip {
position: absolute;
opacity: 0;
width: 100px;
height: 50px;
padding: 2px;
font: 12px sans-serif;
background: red;
border: 0px;
border-radius: 8px;
z-index: 50;
pointer-events: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.0.0/d3.min.js"></script>
<body>
<div id="map">
</div>
</body>这篇关于d3工具提示未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
