【问题标题】:D3 circle mouseoverD3 圆形鼠标悬停
【发布时间】:2018-07-04 02:28:25
【问题描述】:

尝试使用鼠标悬停作为工具提示的一部分来突出显示特定圆圈。当我将鼠标悬停在其中任何一个圆圈上时,我可以让它突出显示所有圆圈,但无法弄清楚如何突出显示鼠标悬停所在的圆圈。 circles.transition() 全部选中,这里有什么我可以简单替换的吗?

if(!circles){
            cellGroup = g.append("g")
                .attr("class", "cells")
                .selectAll("g")
                    .data(d3.voronoi()
                    .extent([[-margin.left, -margin.top], [width + margin.right, height + margin.top]])
                    .x(function(d) { return d.x; })
                    .y(function(d) { return d.y; })
                .polygons(MyData))

cell = cellGroup.enter().append("g").attr("class", "cell");    
circles = cell.append("circle")
                    .attr("r", 0)
                    .attr("cx", function(d) { return d.data.x; })
                    .attr("cy", 0)
                    .attr("class", "swarm-circle")
                    .style("fill", "#D4D4D4"  )
                    .on("mouseover", function(d) {
                        circles.transition()    // trying to highlight the circle that the tooltip relates to
                            .delay(0)
                            .duration(500)
                            .style("stroke", "pink")
                            .style("stroke-width", 5);

【问题讨论】:

    标签: d3.js tooltip mouseover


    【解决方案1】:

    你可以使用select(this),例如:

    .on("mouseover", function(d) {
     d3.select(this)
     .transition()
     .delay(0)
     .duration(500)
     .style("stroke", "pink")
     .style("stroke-width", 5);
    })
    

    【讨论】:

      猜你喜欢
      • 2013-11-28
      • 2015-04-22
      • 2021-12-20
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多