javascript - d3.js voronoi 事件。当光标正好位于点上方时，鼠标悬停似乎消失-6ren

javascript - d3.js voronoi 事件。当光标正好位于点上方时，鼠标悬停似乎消失

转载作者：行者123 更新时间：2023-12-03 01:21:43

请问我在这里做错了什么？我想在鼠标进入关联的 voronoi 单元时增加点的大小，但是当鼠标完全高于该点时，该点会恢复到其原始大小；我尝试了 mouseover 和 mousemove 事件，但没有成功。代码片段，你可以放大，你就能看到我刚才描述的内容。非常感谢!

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>Chart</title>


<!-- Reference minified version of D3 -->
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>

<body>
    <style>
        .grid line {
            stroke: #ddd;
        }
    </style>


<div id='scatter-plot'>
<svg width="700" height="500">
</svg>
</div>

   
<script>

            var data = [];
                for (let i = 0; i < 200; i++) {
                data.push({
                    x: Math.random(),
                    y: Math.random(),
                    dotNum: i,
                })
            }
                
        renderChart(data)
 
    

        
function renderChart(data) {

    var totalWidth = 920,
        totalHeight = 480;
    
    var margin = {
            top: 10,
            left: 50,
            bottom: 30,
            right: 0
        }
    
    var width = totalWidth  - margin.left - margin.right,
        height = totalHeight  - margin.top - margin.bottom;

    // inner chart dimensions, where the dots are plotted
//    var width = width - margin.left - margin.right;
//    var height = height - margin.top - margin.bottom;
    
     var tsn = d3.transition().duration(200);

    // radius of points in the scatterplot
    var pointRadius = 2;

    var extent = {
        x: d3.extent(data, function (d) {return d.x}),
        y: d3.extent(data, function (d) {return d.y}),
    };

    var scale = {
        x: d3.scaleLinear().range([0, width]),
        y: d3.scaleLinear().range([height, 0]),
    };

    var axis = {
        x: d3.axisBottom(scale.x).ticks(xTicks).tickSizeOuter(0),
        y: d3.axisLeft(scale.y).ticks(yTicks).tickSizeOuter(0),
    };
    
    var gridlines = {
        x: d3.axisBottom(scale.x).tickFormat("").tickSize(height),
        y: d3.axisLeft(scale.y).tickFormat("").tickSize(-width),
    }
    

    var colorScale = d3.scaleLinear().domain([0, 1]).range(['#06a', '#06a']);

    // select the root container where the chart will be added
    var container = d3.select('#scatter-plot');

    var zoom = d3.zoom()
        .scaleExtent([1, 20])
        .on("zoom", zoomed);
    
    var tooltip = d3.select("body").append("div")
        .attr("id", "tooltip")
        .style("opacity", 0);

    // initialize main SVG
    var svg = container.select('svg')
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(zoom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    // Clip path
    svg.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);


    // Heatmap dots
    var dotsGroup = svg.append("g")
        .attr("clip-path", "url(#clip)")
        .append("g");
    
    //Create X axis
    var renderXAxis = svg.append("g")
        .attr("class", "x axis")

    //Create Y axis
    var renderYAxis = svg.append("g")
        .attr("class", "y axis")


    // set up axis generating functions
    var xTicks = Math.round(width / 50);
    var yTicks = Math.round(height / 50);

    
    function updateScales(data, scale){
        scale.x.domain([extent.x[0], extent.x[1]]).nice(),
        scale.y.domain([extent.y[0], extent.y[1]]).nice()
    }

    function zoomed() {
        d3.event.transform.x = d3.event.transform.x;
        d3.event.transform.y = d3.event.transform.y;

        // update: rescale x axis
        renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));
        renderYAxis.call(axis.y.scale(d3.event.transform.rescaleX(scale.y)));


        dotsGroup.attr("transform", d3.event.transform);
    }
    
    // add the overlay on top of everything to take the mouse events
    dotsGroup.append('rect')
        .attr('class', 'overlay')
        .attr('width', width)
        .attr('height', height)
        .style('fill', 'red')
        .style('opacity', 0)
        .on('mouseover', mouseMoveHandler)
        .on('mouseleave', () => {
            // hide the highlight circle when the mouse leaves the chart
            highlight(null);
    });
    
    renderPlot(data);
    
    function renderPlot(data){
        updateScales(data, scale);
        
        svg.select('.y.axis')
            .attr("transform", "translate(" + -pointRadius + " 0)" )
            .call(axis.y);
        
        var h = height + pointRadius;
        svg.select('.x.axis')
            .attr("transform", "translate(0, " + h + ")")
            .call(axis.x);
        
        svg.append("g")
            .attr("class", "grid")
            .call(gridlines.x);
        
        svg.append("g")
            .attr("class", "grid")
            .call(gridlines.y);
        
        
        //Do the chart
        var update = dotsGroup.selectAll("circle").data(data)
        
        update
            .enter()
            .append('circle')
            .attr('r', pointRadius)
            .attr('cx', d => scale.x(d.x))
            .attr('cy', d => scale.y(d.y))
            .attr('fill', d => colorScale(d.y))
    };


    // create a voronoi diagram 
    var voronoiDiagram = d3.voronoi()
        .x(d => scale.x(d.x))
        .y(d => scale.y(d.y))
        .size([width, height])(data);


    // add a circle for indicating the highlighted point
    dotsGroup.append('circle')
        .attr('class', 'highlight-circle')
        .attr('r', pointRadius*2) // increase the size if highlighted
        .style('fill', 'red')
        .style('display', 'none');

    // callback to highlight a point
    function highlight(d) {
        // no point to highlight - hide the circle and the tooltip
        if (!d) {
            d3.select('.highlight-circle').style('display', 'none');
            //tooltip.style("opacity",0);
            // otherwise, show the highlight circle at the correct position
        } else {
            d3.select('.highlight-circle')
                .style('display', '')
                .style('stroke', colorScale(d.y))
                .attr('cx', scale.x(d.x))
                .attr('cy', scale.y(d.y));
        }
    }

    // callback for when the mouse moves across the overlay
    function mouseMoveHandler() {
        // get the current mouse position
        var [mx, my] = d3.mouse(this);

        var site = voronoiDiagram.find(mx, my);

        // highlight the point if we found one, otherwise hide the highlight circle
        highlight(site && site.data);


        for (let i = 0; i < site.data.dotNum; i++) {
            //do something....
        }
        
    }




}



    
</script>
</body>

</html>

最佳答案

您必须在圆圈和突出显示圆圈之后绘制覆盖矩形。如果没有，则将鼠标悬停在圆圈上会生成鼠标离开事件，并且您会看到突出显示圆圈闪烁
使用mousemove事件而不是mouseover，这是一种mouse-enter事件
我添加了逻辑，仅在点更改时更新突出显示
缩放和平移时网格不会更新(未修复)
即使在overlay上移动时，仍然存在mouseleave事件 - 它们是由网格线引起的。将点组移到网格线组之后

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">

<title>Chart</title>


<!-- Reference minified version of D3 -->
<script src='https://d3js.org/d3.v4.min.js' type='text/javascript'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
</head>

<body>
<style>
.grid line { stroke: #ddd; }
</style>

<div id='scatter-plot'>
<svg width="700" height="500">
</svg>
</div>

<script>

var data = [];
    for (let i = 0; i < 200; i++) {
    data.push({
        x: Math.random(),
        y: Math.random(),
        dotNum: i,
    })
}
renderChart(data);

function renderChart(data) {

    var totalWidth = 920,
        totalHeight = 480;

    var margin = {
            top: 10,
            left: 50,
            bottom: 30,
            right: 0
        }

    var width = totalWidth  - margin.left - margin.right,
        height = totalHeight  - margin.top - margin.bottom;

    // inner chart dimensions, where the dots are plotted
//    var width = width - margin.left - margin.right;
//    var height = height - margin.top - margin.bottom;

     var tsn = d3.transition().duration(200);

    // radius of points in the scatterplot
    var pointRadius = 2;

    var extent = {
        x: d3.extent(data, function (d) {return d.x}),
        y: d3.extent(data, function (d) {return d.y}),
    };

    var scale = {
        x: d3.scaleLinear().range([0, width]),
        y: d3.scaleLinear().range([height, 0]),
    };

    var axis = {
        x: d3.axisBottom(scale.x).ticks(xTicks).tickSizeOuter(0),
        y: d3.axisLeft(scale.y).ticks(yTicks).tickSizeOuter(0),
    };
    
    var gridlines = {
        x: d3.axisBottom(scale.x).tickFormat("").tickSize(height),
        y: d3.axisLeft(scale.y).tickFormat("").tickSize(-width),
    }

    var colorScale = d3.scaleLinear().domain([0, 1]).range(['#06a', '#06a']);

    // select the root container where the chart will be added
    var container = d3.select('#scatter-plot');

    var zoom = d3.zoom()
        .scaleExtent([1, 20])
        .on("zoom", zoomed);

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

    // initialize main SVG
    var svg = container.select('svg')
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
        .call(zoom)
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

    // Clip path
    svg.append("clipPath")
        .attr("id", "clip")
        .append("rect")
        .attr("width", width)
        .attr("height", height);

    //Create X axis
    var renderXAxis = svg.append("g")
        .attr("class", "x axis")

    //Create Y axis
    var renderYAxis = svg.append("g")
        .attr("class", "y axis")

    // set up axis generating functions
    var xTicks = Math.round(width / 50);
    var yTicks = Math.round(height / 50);

    function updateScales(data, scale){
        scale.x.domain([extent.x[0], extent.x[1]]).nice(),
        scale.y.domain([extent.y[0], extent.y[1]]).nice()
    }

    function zoomed() {
        d3.event.transform.x = d3.event.transform.x;
        d3.event.transform.y = d3.event.transform.y;

        // update: rescale x axis
        renderXAxis.call(axis.x.scale(d3.event.transform.rescaleX(scale.x)));
        renderYAxis.call(axis.y.scale(d3.event.transform.rescaleX(scale.y)));

        dotsGroup.attr("transform", d3.event.transform);
    }

    var dotsGroup;
    renderPlot(data);

    function renderPlot(data){
        updateScales(data, scale);
        
        svg.select('.y.axis')
            .attr("transform", "translate(" + -pointRadius + " 0)" )
            .call(axis.y);
        
        var h = height + pointRadius;
        svg.select('.x.axis')
            .attr("transform", "translate(0, " + h + ")")
            .call(axis.x);
        
        svg.append("g")
            .attr("class", "grid")
            .call(gridlines.x);
        
        svg.append("g")
            .attr("class", "grid")
            .call(gridlines.y);

        dotsGroup = svg.append("g")
                       .attr("clip-path", "url(#clip)")
                       .append("g");
        
        //Do the chart
        var update = dotsGroup.selectAll("circle").data(data)
        
        update
            .enter()
            .append('circle')
            .attr('r', pointRadius)
            .attr('cx', d => scale.x(d.x))
            .attr('cy', d => scale.y(d.y))
            .attr('fill', d => colorScale(d.y))
    };

    // create a voronoi diagram 
    var voronoiDiagram = d3.voronoi()
        .x(d => scale.x(d.x))
        .y(d => scale.y(d.y))
        .size([width, height])(data);

    // add a circle for indicating the highlighted point
    dotsGroup.append('circle')
        .attr('class', 'highlight-circle')
        .attr('r', pointRadius*2) // increase the size if highlighted
        .style('fill', 'red')
        .style('display', 'none');

    // add the overlay on top of everything to take the mouse events
    dotsGroup.append('rect')
        .attr('class', 'overlay')
        .attr('width', width)
        .attr('height', height)
        .style('fill', 'red')
        .style('opacity', 0)
        .on('mousemove', mouseMoveHandler)
        .on('mouseleave', () => {
            // hide the highlight circle when the mouse leaves the chart
            console.log('mouse leave');
            highlight(null);
    });

    var prevHighlightDotNum = null;
    // callback to highlight a point
    function highlight(d) {
        // no point to highlight - hide the circle and the tooltip
        if (!d) {
            d3.select('.highlight-circle').style('display', 'none');
            prevHighlightDotNum = null;
            //tooltip.style("opacity",0);
            // otherwise, show the highlight circle at the correct position
        } else {
            if (prevHighlightDotNum !== d.dotNum) {
                d3.select('.highlight-circle')
                  .style('display', '')
                  .style('stroke', colorScale(d.y))
                  .attr('cx', scale.x(d.x))
                  .attr('cy', scale.y(d.y));
                prevHighlightDotNum = d.dotNum;
            }
        }
    }

    // callback for when the mouse moves across the overlay
    function mouseMoveHandler() {
        // get the current mouse position
        var [mx, my] = d3.mouse(this);

        var site = voronoiDiagram.find(mx, my);

        //console.log('site', site);
        // highlight the point if we found one, otherwise hide the highlight circle
        highlight(site && site.data);

        for (let i = 0; i < site.data.dotNum; i++) {
            //do something....
        }
    }
}
</script>
</body>

</html>

关于javascript - d3.js voronoi 事件。当光标正好位于点上方时，鼠标悬停似乎消失，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51736979/

文章推荐： sql-server-2005 - 将两列合并为一列并获得唯一的

文章推荐： powershell - 如何将powershell模块运送到生产环境？

voronoi - 我怎样才能制作这个 voronoi 图的网格变化？
我有一个让我想起 Voronoi 的问题，但我希望我的变体能让我避免使用 Voronoi 算法，并更快地写一些东西。这是我在 Paint 中制作的一个可怕的图像来说明我的问题: 假设我有一个 map
r - 使用 voronoi 按因子着色时手动设置 Voronoi 图的颜色
上午下午或晚上。 # Reproducible data df % filter(years == i) # # plot % filter(years == i)
python - 获取与 Voronoi 区域关联的点 (scipy.spatial.Voronoi)
我正在生成一个简单的 2D Voronoi 曲面分割，使用 scipy.spatial.Voronoi功能。我使用点的随机二维分布(参见下面的 MCVE)。我需要一种方法来遍历每个定义的区域(由 s
python - 来自 scipy.spatial.Voronoi 对象的 Voronoi 图边 : How to get edges in the form (point1, point2)？
我现在花了很多时间试图从 scipy.spatial.Voronoi 图中获取边，但无济于事。这是主要文档: http://docs.scipy.org/doc/scipy-dev/reference
r - voronoi 镶嵌中的层次结构
我正在使用 voronoi 镶嵌。我有不同的多边形代表分割中的区域。下面的点用于绘制图中的曲面分割。 tessdata [,1] [,2] 1 -0.4960583 -0.35
javascript - Voronoi 单元在力导向布局中超出比例
我有一个可折叠的力导向布局，我从 here 中引用了它. 我修改了代码，在图中的每个节点后面添加了 Voronoi 单元。目前，它看起来像是在工作，因为我可以看到 Voronoi 单元格根据折叠状态出
c - voronoi 图不正确
我创建了一个无法正常工作的 voronoi 代码。我真的想不出错误!!! 我调用的函数是: void Voronoi( const int NbPoints, const int h
algorithm - voronoi 细胞中的质心
给定 voronoi 边列表，如何在合理的时间内获得每个单元格的质心？请注意，我只有 Voronoi 图的边，但我必须确定质心。 Voronoi 图是给定 Delaunay 三角剖分构造的，因此三角剖
关联 Voronoi 图组件的算法
到目前为止，我有一个程序采用一组随机点、站点，并围绕这些点形成适当的 Voronoi 图，表示为角和边的图形。它还为我提供了 Delaunay 三角剖分作为另一个以所有站点为节点的图形(尽管我不知道这
在球体上计算 Voronoi 图的算法？
我正在寻找一种简单的(如果存在的话)算法来查找球体表面上一组点的 Voronoi 图。源代码会很棒。我是 Delphi 人(是的，我知道...)，但我也吃 C 代码。最佳答案 2016 年 7 月更
java - 围绕多边形计算 Voronoi
我需要生成一个 Voronoi diagram围绕多边形内部的凹(非凸)。我在网上找过方法，但我一直无法弄清楚如何做到这一点。基本上，我生成点的凸包，计算对偶点并在这些点之间构建边缘网络。然而，当遇到
python - Voronoi - 计算每个区域的确切边界
我正在尝试使用 scipy.spatial.Voronoi 计算 Voronoi 图每个区域的确切边界，前提是所有点都在预定义的多边形内。例如，使用此 documentation 中的示例. 如果我需
statistics - 如何制作 voronoi 树状图？
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。要求我们推荐或查找书籍、工具、软件库、教程或其他场外资源的问题对于 Stack Overflow 来说是
python - 将 Voronoi 图单元格区域转换为像素坐标列表
我正在使用 Voronoi 图进行图像处理 ( procedurally generated stippling )。为了做到这一点，我需要创建一个元组(x，y 像素位置)列表(coords_wit
Python:如何将 Voronoi 单元扩展到几何的边界？
我有两个 geopandas 数据框 dfMd 和 centers。 dfMd 由多边形组成，而 centers 由点组成。 Here文件的链接。 f,ax=plt.subplots() dfMd.p
python - 曼哈顿度量中的 Voronoi 图
我正在使用 scipy.spatial用于 Voronoi 图的可视化。但是，这里使用的距离度量是欧几里得 (L2)。我正在我的 Voronoi 图上寻找一种曼哈顿 (L1) 度量方式。有没有一种简单
r - 在保持拓扑完整性的同时缓冲多边形的 Voronoi 方法
据我了解，R 缺少一种方法来以空间独占的方式缓冲多边形，以保留相邻多边形的拓扑结构。所以我正在试验一种生成原始多边形顶点的 voronoi 多边形的方法。除了 voronoi 生成中的明显错误外，结果
python - 创建多边形的算法(No Thiesen/Voronoi)
我一直在尝试为各州创建自定义区域。我想通过使用点的影响区域来填充状态图。下图代表了我一直在尝试的东西。左图显示了点，我只想像右图一样填充所有区域。我使用了 Voronoi/Thiesen，但它在区域
draw - 如何绘制两个不同点的 Voronoi 图
我想弄清楚如何为两个不同的点绘制 Voronoi 图。有人可以帮我吗。谢谢最佳答案如我的图片所示，你应该只连接你的点，然后画一条穿过中心的线，与该线段正交。关于draw - 如何绘制两个不同
r - 包含在地理边界中的 Voronoi 图多边形
我正在尝试在固定地理区域内为一组点创建 Voronoi 多边形(又名 Dirichlet 镶嵌或泰森多边形)。但是，我无法在 R 中找到一种将多边形绑定(bind)在 map 边界内的方法。我的主要目

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - d3.js voronoi 事件。当光标正好位于点上方时，鼠标悬停似乎消失