我想在我的venn-example.js代码中实现工具提示。我在执行相同操作时遇到了困难。我尝试了两个工具提示代码。来自-
1 https://github.com/benfred/venn.js
[2] https://bl.ocks.org/arnicas/c911d0abfe9819305660
但是两者都没有给出期望的结果。
代码-
venn-example.js
var sets;
// document.getElementById("venn").innerHTML = localStorage.getItem("set");
sets = JSON.parse(localStorage.getItem("sets"));
console.log("sets=",sets)
console.log("sets.length = ", sets.length)
var lengthWidthHeights = [
// min, max, width, height
[0, 24, 500, 500],
[25, 50, 1000, 800],
[51, 100, 1300, 1300],
[101, 150, 1500, 1600],
[151, 250, 1700, 1900],
[251, 350, 2000, 2500],
[351, 450, 2500, 3000],
[451, 550, 3000, 3500]
];
var { length } = sets;
console.log("length =", length);
var chart;
var foundItem = lengthWidthHeights.find(([min, max]) => length >= min && length <= max);
if (foundItem) {
console.log("inside foundItem =", foundItem);
const [,,width, height] = foundItem;
chart = venn.VennDiagram().width(width).height(height);
}
d3.select("#venn").datum(sets).call(chart);
// ------------- mouse out & over code ------------
d3.selectAll("#rings .venn-circle")
.on("mouseover", function(d, i) {
var node = d3.select(this).transition();
node.select("path").style("fill-opacity", .2);
node.select("text").style("font-weight", "100")
.style("font-size", "36px");
})
.on("mouseout", function(d, i) {
var node = d3.select(this).transition();
node.select("path").style("fill-opacity", 0);
node.select("text").style("font-weight", "100")
.style("font-size", "24px");
});
// ------------- mouse out & over code ends --------------------
// ------------------ Tool Tip code - Bennfred.js ---------------
var div = d3.select("#venn")
div.datum(sets).call(venn.VennDiagram());
// add a tooltip
var tooltip = d3.select("#venn").append("div")
.attr("class", "venntooltip");
// add listeners to all the groups to display tooltip on mouseover
div.selectAll("g")
.on("mouseover", function(d, i) {
// sort all the areas relative to the current item
venn.sortAreas(div, d);
// Display a tooltip with the current size
tooltip.transition().duration(400).style("opacity", .9);
tooltip.text(d.size + " users");
// highlight the current path
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 3)
.style("fill-opacity", d.sets.length == 1 ? .4 : .1)
.style("stroke-opacity", 1);
})
.on("mousemove", function() {
tooltip.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d, i) {
tooltip.transition().duration(400).style("opacity", 0);
var selection = d3.select(this).transition("tooltip").duration(400);
selection.select("path")
.style("stroke-width", 0)
.style("fill-opacity", d.sets.length == 1 ? .25 : .0)
.style("stroke-opacity", 0);
});
// Tool Tip code ends
// ------------ Tool tip code 2 - Simple d3.js---------------
var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "10")
.style("visibility", "hidden")
.text("a simple tooltip");
var sampleSVG = d3.select("#venn")
.append("svg")
.attr("class", "sample")
.attr("width", 300)
.attr("height", 300);
d3.select("#venn svg")
.append("circle")
.attr("stroke", "black")
.attr("fill", "aliceblue")
.attr("r", 50)
.attr("cx", 52)
.attr("cy", 52)
.on("mouseover", function(){return tooltip.style("visibility", "visible");})
.on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})
.on("mouseout", function(){return tooltip.style("visibility", "hidden");});
//----------tool tip code 2 ends -----------------
图片-