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))
  .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>

提前谢谢！

Answer 1

在渲染线条标签时，您只想为鼠标悬停添加一个显示和隐藏它的事件侦听器。因此，除了显示和隐藏标签之外，这里看起来一切都很好，鼠标悬停/鼠标移除时也应该这样做。

以下是我最近工作的一个例子：

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');
    });

在这个例子中，我有一个折线图，每个点都画有圆圈。圆圈最初具有带有笔划的白色中心，但在鼠标悬停时，中心填充与笔划相同的颜色。然后当然关于mouseout这反转了。

希望这有帮助。

用于将鼠标悬停功能添加到折线图的代码

1 个答案: