问题描述
开始探索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工具提示未显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!