我已经生成了一个分组的条形图，并将工具提示设置为指向另一个文件的链接。我为此使用d3.js v4和d3-tip.js。
现在，我想设置工具提示的显示时间，以便用户可以单击它。我无法实现这一部分。我发现了一个使用“ div”的实现：
.on("mouseover", function(d) {
var xPosition = parseFloat(d3.select(this).attr("x")) +x0.bandwidth()/2 -80;
var yPosition = parseFloat(d3.select(this).attr("y")) + height / 10;
div.transition()
.duration(500)
.style("opacity", 0);
div.transition()
.duration(200)
.style("opacity", .9);
div.html(
'<a href= '+"wk"+week+"-"+d.key+"-"+d.value+".html" +' target="_blank">' + d.value + "</a>" )
.style("left", xPosition + "10px")
.style("top", yPosition + "30px")
.style("font-weight", "bold")
})
是否可以在下面的代码中实现以上内容？我在上面尝试过，但是，我不能为此固定工具提示显示的xposition。我想在相应条形高度的上方显示工具提示。
下面是我的工作代码，其中工具提示作为分组条形图中的链接。
<!DOCTYPE html>
<html>
<meta http-equiv="content-type" content="text/html; charset=UTF8">
<script type='text/javascript' src="../../assets/js/clock.js"></script>
<style>
.d3-tip {
line-height: 1;
font-weight: bold;
padding: 8px;
background: #FFE4C4;
color: white;
border-radius: 2px;
text-decoration: none;
}
/* Creates a small triangle extender for the tooltip */
.d3-tip:after {
<!--box-sizing: border-box;-->
display: inline;
font-size: 10px;
width: 100%;
line-height: 1;
color: #FFE4C4;
content: "\25BC";
position: absolute;
text-align: center;
}
/* Style northward tooltips differently */
.d3-tip.n:after {
margin: -1px 0 0 0;
top: 100%;
left: 0;
}
<!--If axix line not to be displayed, uncomment below code-->
<!--.axis .domain {-->
<!--display: none;-->
<!--}-->
<!-- For setting overall graph dimensions:Start -->
</style>
<body>
<svg width="600" height="400"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.7.1/d3-tip.min.js"></script>
<script>
labels = ["T", "P", "F"];
<!-- For setting overall graph dimensions:End -->
<!-- For setting graph margins:Start -->
var svg = d3.select("svg"),
margin = {top: 33, right: 10,bottom: 150, left: 24},
width = +svg.attr("width") - margin.left - margin.right,
height = +svg.attr("height") - margin.top - margin.bottom,
g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var colour = ["#a9a9a9", "#66cc00", "#ff3333"]
var tool_tip = d3.tip()
.attr('class', 'd3-tip')
.offset([-8, 0])
.html(function(d) {
return "<style='color:red'>" + '<a href= '+"wk"+week+"-"+d.key+"-"+d.value+".html" +' target="_parent">' + d.value + "</a>";
})
<!-- For gapping between bar groups-->
var x0 = d3.scaleBand()
.rangeRound([0, width])
.paddingInner(0.2);
<!-- For gapping between bars in groups-->
var x1 = d3.scaleBand()
.padding(0.01);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var z = d3.scaleOrdinal()
.range(["#a9a9a9", "#66cc00", "#ff3333"]);
svg.call(tool_tip)
<!--Data read from csv and plot grouped bar chart-->
d3.csv("weekwise.csv", function(d, i, columns) {
for (var i = 1, n = columns.length; i < n; ++i) d[columns[i]] = +d[columns[i]];
return d;
}, function(error, data) {
if (error) throw error;
var keys = data.columns.slice(1);
x0.domain(data.map(function(d) { return d.Week; }));
x1.domain(keys).rangeRound([0, x0.bandwidth()]);
y.domain([0, d3.max(data, function(d) { return d3.max(keys, function(key) { return d[key]; }); })]).nice();
g.append("g")
.selectAll("g")
.data(data)
.enter().append("g")
.attr("transform", function(d) { return "translate(" + x0(d.Week) + ",0)"; })
.selectAll("rect")
.data(function(d) { return keys.map(function(key) { return {key: key, value: d[key]}; }); })
.enter().append("rect")
.attr("x", function(d) { return x1(d.key); })
.attr("y", function(d) { return y(d.value); })
.attr("width", x1.bandwidth())
.attr("height", function(d) { return height - y(d.value); })
.attr("fill", function(d) { return z(d.key); })
<!--.on('mouseover', tip.show)-->
.on("mouseover", tool_tip.show)
.on('mouseout', tool_tip.hide)
g.append("g")
.attr("class", "axis")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x0));
<!--Code for adding graph title-->
g.append("g")
.attr("class", "axis")
.call(d3.axisLeft(y).ticks(null, "s"))
.append("text")
.attr("x", (width / 2))
.attr("y", 0 - (margin.top / 1.5))
.attr("fill", "#000")
.attr("text-anchor", "middle")
.style("font-size", "14px")
.style("font-weight", "bold")
<!--.style("text-decoration", "underline")-->
.text("Build Statistics-v8.0.18");
<!--Code for defining and appending legend-->
var legend = g.append("g")
.attr("class", "legend")
.attr("height", 100)
.attr("width", 100)
.attr('transform', 'translate(-5,' + (height + 50) + ')')
.style("font", "12px sans-serif");
legend.selectAll('rect')
.data(labels)
.enter()
.append("rect")
.attr("x", function(d, i){
var xPost = legendXPosition(labels, i, 6);
return xPost;
})
.attr("y", -12)
.attr("width", 12)
.attr("height", 12)
.style("fill", function(d, i) {
var color = colour[i];
return color;
});
legend.selectAll('text')
.data(labels)
.enter()
.append("text")
.attr("x", function(d, i){
var xPost = legendXPositionText(labels, i, 22, 6);
return xPost;
})
.attr("y", -1)
.text(function(d) {
return d;
});
function legendXPositionText(data, position, textOffset, avgFontWidth){
return legendXPosition(data, position, avgFontWidth) + textOffset;
}
function legendXPosition(data, position, avgFontWidth){
if(position == 0){
return 0;
} else {
var xPostiion = 0;
for(i = 0; i < position; i++){
xPostiion += (data[i].length * avgFontWidth + 40);
}
return xPostiion;
}
}
});
</script>
</body>
</html>
请帮助。