javascript - Voronoi 细胞使用 D3 (v4) 填充函数-6ren

javascript - Voronoi 细胞使用 D3 (v4) 填充函数

转载作者：行者123 更新时间：2023-11-28 03:59:37

24

4

我正在尝试改编 a Voronoi's diagram superimposed with a map 的这个示例.

我有一个 csv，其中包含纬度、经度和我想要使用的几个信息(例如为图表的细胞和细菌着色)

这是 csv 的第一行:

name,value,latitude,longitude
station1,18921,48.8286765,7.742563499999999
station2,73187,48.905260999999996,7.6535345
station3,146444,48.9310582,7.658132000000001
station4,61442,48.8334661,8.029873799999999
station5,107423,48.665965899999996,7.717782400000001
station6,14808,49.0559404,7.1410655
station7,1137493,48.744460600000004,7.362080199999999
station8,5684,48.934732700000005,8.1615803

然后，HTML(里面有 CSS 和 JSS):

<!DOCTYPE html>    
<html>
<style>

.train_station {
  fill:#4e7d92;
}

.cell {
  stroke: #000;
  fill-opacity: 0.6;
  stroke-opacity: 0.3;
  cursor: pointer;
}


.cell :hover {
  fill:#000;
  stroke: #000;
  fill-opacity: 0.7;
  stroke-opacity: 0.3;
  cursor: pointer;
}

</style>

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

<body>
    <div id="map"></div>

    <script src="http://d3js.org/d3.v4.min.js"></script>       
    <script src="http://d3js.org/topojson.v2.min.js"></script>
    <script type="text/javascript">
            // first, dimensions, projection and others basic variables

            var width = 700,
                height = width*0.85;

            var proj = d3.geoMercator()
                    .center([5.8287, 48.8320])
                    .scale(width * 11.5)
                    .translate([width / 2, height / 2]);

            var path = d3.geoPath()
                         .projection(proj)
                         .pointRadius(width*0.0019);

            var radius = d3.scaleSqrt()
                .domain([0, 100])
                .range([0, 14]);

            var voronoi = d3.voronoi()
                .extent([[-1, -1], [width + 1, height + 1]]);

             var svg = d3.select("#map").append("svg")
                .attr("width", width)
                .attr("height", height);

            d3.queue()
              .defer(d3.csv,"my_csv.csv", typeStation)
              .await(ready)
            // the typeStation function is very important
            function ready(err, stations) {

                // first selection
                var station = svg.selectAll(".station")
                                 .data(stations)
                                 .enter()
                                 .append("g")
                                 .attr("class", "station");

                // Voronoi's transformation with previous selection
                station.append("path")
                       .data(voronoi.polygons(stations.map(proj)))
                       .attr("class", "cell")
                       .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
                       .attr("fill", function(d){
                           // Probleme is here
                           console.log(d)
                       });

                svg.append("path")
                   .datum({type: "MultiPoint", coordinates: stations})
                   .attr("class", "train_station")
                   .attr("d", path);  

        };

        // and the function to parse latitude and longitude of csv
        function typeStation(d) {
          d[0] = +d.longitude;
          d[1] = +d.latitude;
          return d;
        }

    </script>
</body>

但是控制台登录单元格的填充函数没有发送任何内容:d 不可用。我发现this previous post on StakOverflow我认为我的问题非常接近，但我不知道如何使用新的 D3 V4 修复它。

如果我没记错的话，typeStation 函数会将 csv 数据转换为数组(因为它是 voronoi.polygons() 理解的数据类型)，仅包含纬度和经度。所以我尝试像这样改变它:

 function typeStation(d) {
                       d[0] = +d.longitude;
                       d[1] = +d.latitude;
                       d[2] = +d.name;
                       d[3] = +d.value;
                       return d;
                       }

目标是直接在数组中添加名称(用于工具提示)和值(用于条件填充)。但问题还是一样...

无论如何，提前致谢!

最佳答案

长话短说:

typeStation 函数 reshape 将用于 Voronoi 的 csv
它可以与 csv 的任何其他“属性”一起完成
那么，全局函数的参数站可以作为数组使用

所以，这里是完整的 typeStation :

 function typeStation(d) {
                       d[0] = +d.longitude;
                       d[1] = +d.latitude;
                       d[2] = d.name; // = + can't work with a String
                       d[3] = +d.value;
                       return d;
                       }

之后，如果我们想要用值的值填充 Voronoi 单元格:

            station.append("path")
                   .data(voronoi.polygons(stations.map(proj)))
                   .attr("class", "cell")
                   .attr("d", function(d) { return d ? "M" + d.join("L") + "Z" : null; })
                   .attr("fill", function(d){
                       if (d[3] < 60000) {
                       return "#c0c0c0";
                       }
                       // other cases, etc...
                       else {
                       return "#fff";
                       }
                   });

而且效果非常好!

关于javascript - Voronoi 细胞使用 D3 (v4) 填充函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47236733/

24

4

0

文章推荐： html - 宽度不适用于文本区域 MVC

文章推荐： javascript - Chrome 浏览器中的 FakePath 问题

文章推荐： c++ - 选项卡控件上的列表控件 SetFocus 重绘错误

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 边界内的方法。我的主要目

首页

博学

6Ren·AI

商城

javascript - Voronoi 细胞使用 D3 (v4) 填充函数