javascript - Html/D3 工具提示位置问题
问题描述
当鼠标悬停/选择时,我希望工具提示在每个栏上移动。不确定这是否与相对/绝对定位有关。我现在只关心 x 轴(水平)位移。只要结果使工具提示在条形图上移动,我也愿意接受其他建议。我预示了大量条形图的问题,其中工具提示将在横向滚动时消失。谢谢。
var svg = d3.select("svg"),
margin = {
top: 20,
right: 60,
bottom: 110,
left: 40
},
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 x = d3.scaleBand()
.rangeRound([0, width])
.padding(0.1)
.align(0.1);
var y = d3.scaleLinear()
.rangeRound([height, 0]);
var stack = d3.stack()
.offset(d3.stackOffsetExpand);
var colors = ["orange", "blue", "green"];
var data = [{
name: "xyhtye",
Yes: 10,
No: 0,
ls1: ['aa'],
ls2: ['bb']
}, {
name: "xhetye",
Yes: 0,
No: 10,
ls1: ['aa'],
ls2: ['bb']
}, {
name: "xyhety",
Yes: 0,
No: 0,
ls1: ['aa'],
ls2: ['bb']
}, {
name: "xyhete",
Yes: 10,
No: 0,
ls1: ['aa'],
ls2: ['bb']
}, {
name: "xyhe",
Yes: 10,
No: 0,
ls1: ['aa'],
ls2: ['bb']
}];
x.domain(data.map(function(d) {
return d.name;
}));
var serie = g.selectAll(".serie")
.data(stack.keys(["No", "Yes"])(data))
.enter().append("g")
.attr("class", "serie")
.attr("fill", function(d, i) {
return colors[i];
});
var tooltip = d3.select('#tooltip');
var rects = serie.selectAll("rect")
.data(function(d) {
return d;
})
.enter().append("rect")
rects.attr("x", function(d) {
return x(d.data.name);
})
.attr("y", function(d) {
return y(d[1]);
})
.attr("height", function(d) {
return y(d[0]) - y(d[1]);
})
.attr("width", x.bandwidth())
.on('mouseover', function(d, i) {
var thisName = d3.select(this.parentNode).datum().key;
var thisValue = d.data[thisName];
var total = d.data.foo + d.data.bar;
tooltip.html("Name: " + thisName + "<br>Value: " + thisValue + "<br>Percentage: " + thisValue / total + "%");
});
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="tooltip">tooltip</div>
<svg width="500" height="500"></svg>
解决方案
我在工具提示中添加了以下样式属性。将位置设置为绝对允许您将工具提示定位在您想要的位置,并从文档流中删除工具提示,以便在工具提示切换其可见性时不会干扰其他元素。
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="tooltip" style="position:absolute; left: 300px">tooltip</div>
<svg width="500" height="500"></svg>
如果要将工具提示定位在悬停的栏上,则可以使用 d3 根据数据定位工具提示。就像是:
d3.selectAll( ".tooltip").data( data )
.enter()
.append('div')
.attr("class", "tooltip")
.attr( "left", (d)=> x( d.data.name) )
.style("opacity", 0)
然后对于 css:
.tooltip {
width: 100px;
height: 100px;
position: absolute;
opacity: 0;
transition: .66s;
}
.tooltip:hover {
opacity: 1;
}
推荐阅读
- php - 如何在 CodeIgniter 中为通用任务实现观察者模式
- html - Photoshop 中的像素大小与 CSS 不同
- c++ - c++克隆类对象函数
- api - XERO API Oauth 2.0 用户认证
- f# - Fsharpc 无法生成 fsi 文件
- mongodb - MongoDB 在 WSL 上因“fdatasync:无效参数”而失败
- python - 从 Flask 应用程序获取当前用户并在 Dash 应用程序中使用
- html - 如何使用显示:用css中的按钮正确阻止?
- python - 当每个键不同时,如何按值对字典列表进行排序?
- python-3.x - 在 Python 中使用 AND 参数在文件中搜索不同的单词