添加鼠標懸停功能到折線圖的代碼

嗨我試圖讓我的折線圖的鼠標懸停功能工作，因此我可以將鼠標懸停在折線圖上並查看每個點的值。我嘗試使用鼠標功能，但它沒有奏效。我怎樣才能做到這一點？我還包括了線的圖片圖添加鼠標懸停功能到折線圖的代碼

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Unemployment by Ward Bar Chart</title> 

    <style type="text/css"> 
    .axis text{ 
    font-family: Arial; 
    font-size: 13px; 
    color: #333333; 
    text-anchor: end; 
} 

path { 
stroke: steelblue; 
stroke-width: 2; 
    fill: none; 
} 

.axis path, 
.axis line { 
fill: none; 
stroke: grey; 
stroke-width: 1; 
shape-rendering: crispEdges; 
} 


.textlabel{ 
font-family: Arial; 
font-size:13px; 
color: #333333; 
text-anchor: middle; 
} 
} 

</style> 
<body> 


<script src="http://d3js.org/d3.v3.min.js"></script> 

<script> 

// Set the dimensions of the canvas/graph 
    var margin = {top: 20, right: 0, bottom: 60, left: 60}, 

width = 475; 
height = 350; 
padding = 100; 


    // Adds the svg canvas 
    var svg = d3.select("body") 
.append("svg:svg") 
.attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("viewBox", "0 0 " + width + " " + height); 




// Parse the date/time 
    var parseDate = d3.time.format("%m/%d/%y").parse; 
    var formatTax = d3.format(",.2f"); 

// Set the ranges 
var x = d3.time.scale() 
.range([0, width - margin.right - margin.left], .1) 
.nice(); 


var y = d3.scale.linear() 
.range([height - margin.top - margin.bottom, 20]) 
.nice(); 

// Define the axes 
var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 
    .ticks(5); 

var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .tickFormat(function(d) {return "$" + d + "B"}); 



    // Define the line 
var valueline = d3.svg.line() 

.x(function(d) { return x(d.Date); }) 
.y(function(d) { return y(d["Tax Collections"]); }); 




    // Get the data 
    d3.csv("Yearly Tax Collections.csv", function(error, data) { 
    data.forEach(function(d) { 
    d.Date = parseDate(d.Date); 
    d["Tax Collections"] = formatTax(+d["Tax Collections"]/1000000000); 
}); 


    var g = svg.selectAll("g").data(data).enter().append("svg:g") 
    .attr("width", width + margin.left + margin.right) 
.attr("height", height + margin.top + margin.bottom); 

    // Scale the range of the data 
x.domain(d3.extent(data, function(d) { return d.Date; })); 

y.domain([0, d3.max(data, function(d) { return Math.ceil (d["Tax Collections"]); }) 
    ]); 



    // Add the valueline path and mouseover 
svg.append("path") 
.attr("class", "line") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
.attr("d", valueline(data)) 
    .append("title"); 


// Add the X Axis 
    svg.append("g") 
    .attr("class", "x axis") 
    .attr("transform", "translate(" + margin.left + "," + (height - margin.bottom) + ")") 
.call(xAxis); 

// Add the Y Axis 
svg.append("g") 
.attr("class", "y axis") 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
.call(yAxis); 

    // Y-axis labels 
    svg.append("text") 
    .attr("text-anchor", "middle") 
    .style("font-size", "13px") 
    .style("color", "#333333") 
    .attr("transform", "translate ("+ (padding/4) + "," +(height/2)+")  rotate(-90)") 
    .text("Tax Revenue") 
    .style("font-family", "Arial"); 

    // X-axis labels 
    svg.append("text") 
    .attr("text-anchor", "middle") 
    .style("font-size", "13px") 
    .style("color", "#333333") 
    . attr("transform", "translate("+ (width/2) + "," +(height-(padding/4)) + ")") 
    .text("Fiscal Year") 
    .style("font-family", "Arial"); 

    //source 

    svg.append("text") 
    .attr("text-anchor", "middle") 
    .style("font-size", "13px") 
    .style("color", "#333333") 
.attr("transform", "translate("+ (width/4.5) + "," +(height/1) + ")") 
.text("Source: DC OCFO") 
.style("font-family", "Arial") 

    //title for the chart 

    svg.append("text") 
.attr("text-anchor", "middle") 
.style("font-size", "16px") 
    .style("color", "#333333") 
.attr("transform", "translate("+ (width/3) + "," +(height/30) + ")") 
.text("DC Total Tax Revenues by Fiscal Year") 
    .style("font-family", "Arial"); 


    svg.append("text") 
    .attr("text-anchor", "left") 
    .style("font-size", "13px") 
    .style("color", "#333333") 
.attr("transform", "translate("+ (width/20) + "," +(height/12) + ")") 
.text("2000 to 2015") 
.style("font-family", "Arial") 






//line labels 

    svg.append('g') 
.classed('labels-group', true) 
    .selectAll('text') 
    .data(data) 
    .enter() 

    .append('text') 
    .filter(function(d, i) { return i === 0||i === (data.length - 1) }) 
    .classed('label',true) 

    .classed('label',true) 
    .attr({ 
    'x':function(d,i) { 
    return x(d.Date); 

    }, 
    'y':function(d,i) { 
    return y(d["Tax Collections"]); 
    } 
    }) 
    .text(function(d,i){ 
    return "$" + d["Tax Collections"] + "B"; 
}) 
.attr("transform", "translate(" + margin.left + "," + margin.top + ")") 



}); 

</script> 
</body>

預先感謝您！

來源

2016-04-20 dedpo

此鏈接可能會有幫助 - http://www.d3noob.org/2014/07/my-favourite-tooltip-method-for-line.html – Gilsha

在渲染線標籤時，您只需添加一個用於顯示並隱藏它的鼠標懸停的事件偵聽器。因此，除了顯示和隱藏您的標籤外，這裏顯示的所有內容都很好，這也是您在鼠標懸停/鼠標懸停時應該執行的操作。

這裏是我的意思是我在最近的工作是什麼一個例子：

g.append('svg:circle') 
    .attr('cx', function(){ return x(j.timestamp._d); }) 
    .attr('cy', function(){ return y(j.value); }) 
    .attr('r', 4) 
    .attr('stroke', ML.colors.array[i]) 
    .attr('stroke-width', 2) 
    .attr('fill', '#ffffff') 
    .attr('class', 'circle-markers') 
    .attr('data-index', k) 
    .on('mouseover', function(){ 
      $(this).attr('fill', ML.colors.array[i]); 
    }).on('mouseout', function(){ 
      $(this).attr('fill', '#ffffff'); 
    });

在這個例子中我有在每個點描畫圓線圖。這些圓圈最初有一個白色的中心，但是在鼠標懸停時，中心填充的顏色與筆畫顏色相同。當然，在鼠標移出時，這會逆轉。

希望這會有所幫助。

來源

2016-04-20 00:36:31

添加鼠標懸停功能到折線圖的代碼

回答

相關問題