Question

当用户将鼠标悬停在折线图上时，我希望在折线图上有工具提示和小圆圈。这是我的折线图代码。

<!DOCTYPE html>
<style>

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

div.circle{
  border-radius: 50%;        
  width: 30px;                  
  height: 30px;                 
}
</style>
<html>
<head>
  <script type="text/javascript" src="d3.v3.min.js"></script>
</head>
<body>
<script type="text/javascript">

data = [

  {date: 1,temp:10},{date: 2,temp:40},{date: 3,temp:90},
  {date: 4,temp:30},{date: 5,temp:20},{date: 6,temp:10}
];

  var margin = {top: 20,left: 30, bottom: 30,right: 40},
      height = 500 - margin.top - margin.bottom,
      width = 900 - margin.left - margin.right;

  var x = d3.time.scale()
            .range([0,width]);

  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 chart = 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+")");

  var line = d3.svg.line()
                .x(function(d){return x(d.date);})
                .y(function(d){return y(d.temp);})
                .interpolate("linear");

    x.domain(d3.extent(data,function(d){return d.date}));
    y.domain([d3.min(data,function(d){return d.temp}),d3.max(data,function(d){return d.temp})]);

    chart.append("g")
          .attr("class","x axis")
          .attr("transform","translate(0,"+height+")")
          .call(xAxis);
    chart.append("g")
          .attr("class","y axis")
          .call(yAxis);
    chart.append("path")
          .attr("class", "line")
          .attr("d",line(data))
          .attr("stroke","red")
          .attr("stroke-width",2)
          .attr("fill","none")
</script>
</body>
</html>

如何在折线图上动态获取转换圈和工具提示？我试图捕捉鼠标的x和y坐标并在该坐标中显示圆圈，但看起来不太好。 check my previous question

Answer 1

第一个解决方案 here

或者您需要像

一样绑定鼠标悬停

.on("mouseover", function() {
    console.log({"x": d3.event.x, "y": d3.event.y});
});

将通过工具提示为您提供此位置的当前位置显示圆圈更多参考here

也你可以预先渲染圆圈并在鼠标悬停时将其移动到当前位置和鼠标输出或者删除一些超时来隐藏它

如何动态获取折线图上的过渡圆和工具提示

1 个答案: