Question

您好我试图让鼠标悬停功能适用于我的折线图，这样我就可以将鼠标悬停在折线图上并查看每个点的值。我尝试使用鼠标功能，但它没有工作。我该如何修复/做到这一点？我还附上了折线图的图片

 <!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))
     .attr("id", "myPath")
     .on("mousemove", mMove)
     .append("title");

  function mMove(){

 var m = d3.mouse(this);
 d3.select("#myPath")
 .select("title")
 .filter(function(d, i) 
  .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";
 })

 }

// 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>

谢谢你！

d3折线图中的鼠标悬停功能

0 个答案: