工具提示不工作也不顯示在 D3 分散 plot
[英]Tooltip not working nor displaying on D3 scatter plot
問題描述
我想在折線圖中添加一個工具提示，其中每個數據點在 hover 上顯示一個文本框，如下所示：
-----------------| x坐標：## | y坐標：## | -----------------|
工作圖的工作片段發布在下面。 但我會將工具提示塊注釋掉到 plot 圖表中。
謝謝。
var margin = {top: 50, right: 50, bottom: 50, left: 50}, width = window.innerWidth - margin.left - margin.right, height = window.innerHeight - margin.top - margin.bottom; //labels var labels = ['Mon','Tue','Thur','Frid']; var yvals = [12,11,0,18]; // X scale var xScale = d3.scalePoint().domain(labels) // input.range([0, width-1]); // output // Y scale var yScale = d3.scaleLinear().domain([0, 20]).range([height,0]); var line = d3.line().x(function(d, i) { return xScale(labels[i]); }).y(function(d) { return yScale(dy); }).curve(d3.curveMonotoneX) var dataset = d3.range(yvals.length).map(function(d,i) { return {"y": yvals[i]} }) //Tooltip //var tip = d3.select('body') //.append('div') //.attr('class', 'tip') //.html('number:'+ function(d,i) return {data[data.i]}) //.style('border', '1px solid steelblue') //.style('padding', '5px') //.style('position', 'absolute') //.style('display', 'none') //.on('mouseover', function(d, i) { // tip.transition().duration(0); // }) //.on('mouseout', function(d, i) { // tip.style('display', 'none'); // }); // SVGs var svg = d3.select("body").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 + ")"); svg.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "white"); svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // x axis call svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")") //.call(d3.axisBottom(xScale)); .call(d3.axisBottom(xScale)); // y axis call svg.append("g").attr("class", "y axis").call(d3.axisLeft(yScale)); svg.append("path").datum(dataset).attr("class", "line").attr("d", line); // 12. Appends a circle for each datapoint svg.selectAll(".dot").data(dataset).enter().append("circle") // Uses the enter().append() method.attr("class", "dot") // Assign a class for styling.attr("cx", function(d, i) { return xScale(labels[i]) }).attr("cy", function(d,i) { return yScale(yvals[i]) }).attr("r", 3); //.on('mouseover', function(d, i) { // tip.transition().duration(0); // }) svg.append("text").attr("class", "title").attr("x", width/2).attr("y", 0 - (margin.top / 2)).attr("text-anchor", "middle").text("Testing");
.line { fill: none; stroke: orange; stroke-width: 1; }.dot { fill: brown; stroke: #fff; }
<:DOCTYPE html> <meta charset="utf-8"> <style type="text/css"> </style> <body> </body> <script src="https.//d3js.org/d3.v5.min.js"></script> <script> </script>
1 個解決方案
解決方案1
0 已采納 2019-11-15 22:00:53
我剛剛對mousemove事件進行了一些更改。
var margin = { top: 50, right: 50, bottom: 50, left: 50 }, width = window.innerWidth - margin.left - margin.right, height = window.innerHeight - margin.top - margin.bottom; //labels var labels = ['Mon', 'Tue', 'Thur', 'Frid']; var yvals = [12, 11, 0, 18]; // X scale var xScale = d3.scalePoint().domain(labels) // input.range([0, width - 1]); // output // Y scale var yScale = d3.scaleLinear().domain([0, 20]).range([height, 0]); var line = d3.line().x(function(d, i) { return xScale(labels[i]); }).y(function(d) { return yScale(dy); }).curve(d3.curveMonotoneX) var dataset = d3.range(yvals.length).map(function(d, i) { return { "y": yvals[i] } }) var tip = d3.select('body').append("div").attr("class", "tip"); // SVGs var svg = d3.select("body").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 + ")"); svg.append("rect").attr("width", "100%").attr("height", "100%").attr("fill", "white"); svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); // x axis call svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + height + ")") //.call(d3.axisBottom(xScale)); .call(d3.axisBottom(xScale)); // y axis call svg.append("g").attr("class", "y axis").call(d3.axisLeft(yScale)); svg.append("path").datum(dataset).attr("class", "line").attr("d", line); // 12. Appends a circle for each datapoint svg.selectAll(".dot").data(dataset).enter().append("circle") // Uses the enter().append() method.attr("class", "dot") // Assign a class for styling.attr("cx", function(d, i) { return xScale(labels[i]) }).attr("cy", function(d, i) { return yScale(yvals[i]) }).attr("r", 3).on("mouseover", function() { tip.style("display", null); }).on("mouseout", function() { tip.style("display", "none"); }).on("mousemove", function(d) { return tip.style("left", d3.event.pageX + "px").style("top", d3.event.pageY + 10 + "px").style("visibility", "visible").html(function() { return '<div style="border:1px solid #ccc;">' + '<p style="font-weight:bold;">' + dy + '</p>' + '</div>'; }) }) svg.append("text").attr("class", "title").attr("x", width / 2).attr("y", 0 - (margin.top / 2)).attr("text-anchor", "middle").text("Testing");
.line { fill: none; stroke: orange; stroke-width: 1; }.dot { fill: brown; stroke: #fff; }.tip { position: absolute; border: 1px solid steelblue; visibility: hidden; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.0.0/d3.min.js"></script>
這是工作的jsFiddle
希望能幫助到你：）
散點圖矩陣的工具提示-使用d3
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.