个人中心
gpt4 book ai didi

javascript - 鼠标悬停在轴标签 d3.js javascript 上的事件

转载 作者：搜寻专家 更新时间：2023-11-01 05:21:48 25 4
gpt4 key购买 nike

有谁知道是否可以将鼠标悬停在 y 轴标签上？例如，我在下面有一个散点图。 y 轴上的标签是“area1”、“area2”和“area3”。当用户悬停标签“area1”时，将弹出一个工具提示以显示 area1 的描述。我以前没有看到任何这样的例子。有人知道怎么做吗？非常感谢!
我这里也有一个 plunker http://plnkr.co/edit/wLjanxFWIzpxP0cbq6kK?p=preview 

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Plot</title>
    <style> 
     .axis path,
     .axis line{
        fill: none;
        stroke: #000;
        shape-rendering: crishpEdges;
        }    
    </style>
  </head>
    <h1 style = "text-align:center;">Example</h1>     

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

     var data = [
       {x: 5, y: "area1"
        },
       {x: 34, y: "area2"
        },
       {x: 19, y: "area3"
        }
       ];

 data.forEach(function(d){
        d.x = +d.x;
        d.y = d.y;

        return console.log(data);
    })

    var m = {t:30, r:20, b:40, l:45 },
        w = 600 - m.l - m.r,
        h = 500 - m.t - m.b;

    var x = d3.scale.linear()
        .range([0, w])
        .domain([0,d3.max(data, function(d){return d.x})]);

    var y = d3.scale.ordinal()
        .rangeRoundPoints([h-18,0])
        .domain(data.map(function(d){return d.y;}));   

    var xAxis = d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(8);

    var yAxis = d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(3);

    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", w + m.l + m.r)
        .attr("height", h + m.t + m.b)
        .style("margin-left", "auto")
        .style("margin-right", "auto")
        .style("display", "block")
        .append("g")
        .attr("transform", "translate(" + m.l + "," + m.t + ")");     

    var circles = svg.selectAll("circle")
       .data(data)
       .enter()
       .append("circle")
       .attr("class", "circles")
       .attr({
        cx: function(d) { return x(d.x); },
        cy: function(d) { return y(d.y); },
        r: 8
      });

    svg.append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + h + ")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .call(yAxis);

    </script>
  </body>
</html>

最佳答案

为此首先创建一个工具提示 div。

  var div = d3.select("body").append("div") 
    .attr("class", "tooltip")               
    .style("opacity", 0);

接下来在工具提示的CSS中添加样式

div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

对于 y 轴上的工具提示，选择所有刻度和 mouseover 和 mouseout 监听器

yaxis.selectAll(".tick")[0].forEach(function(d1) {
    var data = d3.select(d1).data();//get the data asociated with y axis
    d3.select(d1).on("mouseover", function(d) {
      //on mouse hover show the tooltip
            div.transition()        
                .duration(200)      
                .style("opacity", .9);      
            div .html(data) 
                .style("left", (d3.event.pageX) + "px")     
                .style("top", (d3.event.pageY - 28) + "px");    
            })                  
        .on("mouseout", function(d) {   
          //on mouse out hide the tooltip
            div.transition()        
                .duration(500)      
                .style("opacity", 0);   
        });

  })

工作代码 here

希望这对您有所帮助!

关于javascript - 鼠标悬停在轴标签 d3.js javascript 上的事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34030574/

25 4 0
文章推荐： javascript - 如何在 JINT Javascript 端创建计时器
文章推荐： ios - 如何将 .dSYM 文件解码为明确的 DWARF 格式？
文章推荐： 在 js.erb Ruby on Rails 中呈现部分后， Assets 中的 Javascript 无法正常工作
文章推荐： javascript - 如何获取 jquery datepicker 的当前事件实例