- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试在this example之后的多折线图表上添加工具提示。我希望当鼠标悬停在其中任何一行上时,工具提示同时显示在这两行上,例如 example here 。在我的真实案例中,我有四行。
这是我的 jsbins https://jsbin.com/budonapeki/edit?html,js,console,output点击右上角的“Run with JS”即可查看图表。
我的问题是...
在我的 jsbin 中,工具提示仅显示在该行的第一个点上,当鼠标移动时其他工具提示不会显示。谁能帮忙指出原因吗?
如何让工具提示同时显示在各行上而不重复太多代码?由于我使用 d3.nest() 来转换数组,因此我不确定这是否会影响工具提示的工作。
欣赏!
按照马克评论中的链接,我终于完成了工具提示。但我还有一些其他问题...
这是我更新的 JSbins https://jsbin.com/hoceneneso/edit?html,js,console,output
第一个问题是..在我的图表中,右侧有两个按钮,当单击按钮时,线条可以消失或出现。并且该线对应的工具提示应该消失或与该线一起出现。但在我的图表中,即使我单击按钮,工具提示仍然存在。
我试图删除并更改工具提示的不透明度,但我仍然无法使其工作。有人对此有想法吗?
第二个问题是..我试图让工具提示开始显示在“name1”处,这是线条的起点。我知道灰色矩形是为了捕获 Canvas 上的鼠标移动,因此我尝试通过 .attr("transform", "translate(180,3)")
移动矩形,但工具提示仍然显示将鼠标悬停在 y 轴上。任何人都可以解释原因和建议吗?
非常感谢!
最佳答案
第一问题,为每个“每行鼠标”设置一个唯一的 ID,以便您可以切换其不透明度:
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(dataNest1)
.enter()
.append("g")
.attr("class", "mouse-per-line")
.attr("id", function(d){
return "mouse-per-line-" + d.key;
});
在图例中单击处理程序:
d3.select("#mouse-per-line-" + d.key)
.style("opacity", newOpacity);
第二问题,设置x
和width
属性,而不是transform
来移动矩形。您可以通过以下方式使其动态化:
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('x', x(dataNest1[0].values[0].x))
.attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x))
...
<小时/>
更新的代码:
var data1 = [
{x: "Name1", y: 2.5, label: "A"},
{x: "Name2", y: 3.5, label: "A"},
{x: "Name3", y: 4.7, label: "A"},
{x: "Name1", y: 4.7, label: "B"},
{x: "Name2", y: 3.5, label: "B"},
{x: "Name3", y: 4.9, label: "B"},
];
var margin = {top: 20, right: 150, bottom: 60, left: 80},
width = 1160 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.ordinal().
rangeBands([0, width], 0.4, 0.8);
var y = d3.scale.linear()
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var svg = d3.select("#lineChart").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(data1.map(function(d) { return d.x; }));
y.domain([0, d3.max(data1, function(d) { return d.y; })]);
svg.append("g").
attr("class", "x axis").
attr("transform", "translate(-70," + height + ")").
call(xAxis);
svg.append("g").
attr("class", "y axis").
call(yAxis);
var dataNest1 = d3.nest()
.key(function(d) {return d.label;})
.entries(data1);
//console.log(dataNest1)
var color = d3.
scale.
ordinal().
range(['red', 'blue']).
domain(d3.keys(data1[0]).
filter(function(key) {return key === 'label';}));
var legendSpace = width/dataNest1.length;
dataNest1.forEach(function(d,i) {
svg.append("path")
.attr("class", "line1")
.style("stroke", function() {
return d.color = color(d.key); })
.attr("id", 'tag'+d.key.replace(/\s+/g, '')) // assign ID **
.attr("d", line(d.values));
svg.append("text")
.attr("x", width - margin.left + 50)
.attr("y", legendSpace/4 + i*(legendSpace/6))
.attr("class", "lineLegend1")
.attr("id", 'tagLegend'+d.key.replace(/\s+/g, '')) // assign ID **
.style("fill", function() {
return d.color = color(d.key); })
.on("click", function(){
console.log(d);
// Determine if current line is visible
var active = d.active ? false : true,
newOpacity = active ? 0 : 1;
// Hide or show the elements based on the ID
d3.select("#tag"+d.key.replace(/\s+/g, ''))
//.remove();
.transition().duration(500)
.style("opacity", newOpacity);
//d3.selectAll(".mouse-per-line circle")
// .style("opacity", newOpacity);
//d3.selectAll(".mouse-per-line text")
// .style("opacity", newOpacity);
// Update whether or not the elements are active
d.active = active;
d3.select("#mouse-per-line-" + d.key)
.style("opacity", newOpacity);
})
.text(d.key);
});
var mouseG = svg.append("g")
.attr("class", "mouse-over-effects");
mouseG.append("path") // this is the black vertical line to follow mouse
.attr("class", "mouse-line")
.style("stroke", "black")
.style("stroke-width", "1px")
.style("opacity", "0");
var lines = document.getElementsByClassName('line1');
var mousePerLine = mouseG.selectAll('.mouse-per-line')
.data(dataNest1)
.enter()
.append("g")
.attr("class", "mouse-per-line")
.attr("id", function(d){
return "mouse-per-line-" + d.key;
});
mousePerLine.append("circle")
.attr("r", 7)
.style("stroke", function(d) {
return color(d.key);
})
.style("fill", "none")
.style("stroke-width", "1px")
.style("opacity", "0");
mousePerLine.append("text")
.attr("transform", "translate(10,3)");
mouseG.append('svg:rect') // append a rect to catch mouse movements on canvas
.attr('x', x(dataNest1[0].values[0].x))
.attr('width', x(dataNest1[0].values[dataNest1[0].values.length - 1].x) - x(dataNest1[0].values[0].x))
.attr('height', height)
.attr('fill', 'grey')
.style('opacity', '0.4')
.attr('pointer-events', 'all')
.on('mouseout', function() { // on mouse out hide line, circles and text
d3.select(".mouse-line")
.style("opacity", "0");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "0");
d3.selectAll(".mouse-per-line text")
.style("opacity", "0");
})
.on('mouseover', function() { // on mouse in show line, circles and text
d3.select(".mouse-line")
.style("opacity", "1");
d3.selectAll(".mouse-per-line circle")
.style("opacity", "1");
d3.selectAll(".mouse-per-line text")
.style("opacity", "1");
})
.on('mousemove', function() { // mouse moving over canvas
var mouse = d3.mouse(this);
d3.select(".mouse-line")
.attr("d", function() {
var d = "M" + mouse[0] + "," + height;
d += " " + mouse[0] + "," + 0;
return d;
});
d3.selectAll(".mouse-per-line")
.attr("transform", function(d, i) {
//console.log(width/mouse[0])
var xQuater = y.invert(d3.mouse(this)[0]),
bisect = d3.bisector(function(d) { return d.x; }).right;
idx = bisect(d.values, xQuater);
var beginning = 0,
end = lines[i].getTotalLength(),
target = null;
while (true){
target = Math.floor((beginning + end) / 2);
pos = lines[i].getPointAtLength(target);
if ((target === end || target === beginning) && pos.x !== mouse[0]) {
break;
}
if (pos.x > mouse[0]) end = target;
else if (pos.x < mouse[0]) beginning = target;
else break; //position found
}
d3.select(this).select('text')
.text(y.invert(pos.y).toFixed(2));
return "translate(" + mouse[0] + "," + pos.y +")";
});
});
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<meta charset='utf-8'>
<title>Charts</title>
</head>
<body>
<div align="center" id="lineChart">
</div>
<style>
.axis {
font-family: Helvetica;
font-size: 1em;
font-weight: bold;
color: #444444;
}
.axis path,
.axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.line2{
fill: none;
stroke: red;
stroke-width: 1.5px;
}
.line1{
fill: none;
stroke: blue;
stroke-width: 1.5px;
}
</style>
</body>
</html>
关于javascript - 单击按钮 d3.js 时如何在线删除工具提示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35441624/
我有一个 PowerBI Online 数据集,它是在 PowerBI 桌面中创建然后在线发布的。到目前为止,一切都很好。 我通过 PowerBI pusblish 从 Excel 连接到数据集,按预
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 我们不允许提问寻求书籍、工具、软件库等的推荐。您可以编辑问题,以便用事实和引用来回答。 关闭 2 年前。
我必须对一些太大而无法放入内存的数据训练分类模型,我正在使用 scikit learn 和 pandas 来进行分析。所以这是我的问题,如何在在线学习管道中使用验证来调整超参数? 我使用带有chuck
我正在开发一个应用程序,该应用程序将从 webservice 获取数据和图像并将其存储在设备中以供离线使用。同时,应用程序会将一些数据存储在 sqlite db 中,并将一些图像作为默认数据。 这是应
是否可以使用 FileReader API 和 onprogress 事件访问随 HTML5 传入的数据? 如果是这样,是否有 MD5 或其他快速散列算法的“在线”版本,以便我可以在文件完全读取之前开
希望任何人都可以帮助我更改下面的代码,我的临时文件包含以下代码: Temp=8.4* Humidity=70.4% 代替代码 Temp = 24 *C, Hum = 40 % 适用于以下脚本。 我需
我必须创建一个功能类似于联系人应用程序的应用程序。您可以在客户的 iPhone 上添加一个联系人,它应该会上传到客户的 iPad 上。如果客户在他们的 iPad 上更新联系人,它应该会在他们的 iPh
在 gitlab.com 上审查 merge 请求时,有时我必须在完成 merge 之前进行 rebase。 在 gitlab 上按“Rebase”后,我有一个特定的管道步骤失败,因为它无法验证用户的
关闭。这个问题是off-topic .它目前不接受答案。 想改善这个问题吗? Update the question所以它是 on-topic对于堆栈溢出。 9年前关闭。 Improve this q
我正在尝试在 azure 上托管 SQL 服务器以与节点应用程序进行通信。我已经成功地完成了创建数据库服务器和数据库本身的过程。现在,我想编辑我的数据库结构。据我发现online ,应该有一种方法可以
我在 Quickbooks Intuit 开发人员 API 中使用 Oauth 2 获得了访问 token 。 范围是 com.intuit.quickbooks.accounting 我能够使用 Q
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 6年前关闭。 Improve thi
是否可以使Angular Material progress spinner与文本并大致与字符的大小一致地显示? 我想要类似的东西: please wait 微调器仅与“请稍候”文本成行出现。 这可
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗?更新问题,使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
就目前而言,这个问题不适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visit the
我有一个每天运行的Powershell脚本。今天它失败了,因为我正在使用的域 Controller 不可用。在继续执行脚本的其余部分之前,我想确保可以连接到可用的DC。 $LdapServer = "
我想制作一款在线 Flash 游戏,它将具有社交功能,但游戏玩法将主要是单人游戏。例如,屏幕上不会同时出现两个玩家,社交互动将通过异步消息进行,不会有实时聊天或其他任何内容。大部分逻辑将发生在客户端中
这几天我开始在线玩OpenShift。我部署了一个非常简单的“Hello World”Java 示例(1 行代码!),没有任何依赖项(没有 Spring!)命令行是这样的: oc.exe new-a
已关闭。此问题不符合Stack Overflow guidelines 。目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的,因为
所以我一直在网上学习Java(初学者),并且我一直在尝试制作一个用于制作矩形的类文件。但是,我的在线 java 评估器指出它找不到实例变量。 This is the comment on it.我的代
我是一名优秀的程序员,十分优秀!