。will， 2024-05-03 16:38 采纳率: 0%
浏览 5
已结题

有了解d3和topogram.js库的吗？有偿请教

基于D3和topogram Js库生成cartogram，程序运行生成的地图没有变形

  • 写回答

17条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2024-05-03 16:38
    关注

    引自免费微信小程序：皆我百晓生

    Topogram.js是一个用于创建等值区域图（也称为cartogram）的JavaScript库，它基于D3.js。Cartogram是一种地图，其中地理区域的形状被扭曲以反映其他变量，例如人口或经济数据。如果你在使用topogram.js时遇到地图没有变形的问题，可能是因为配置不正确或者数据没有正确关联到地理形状。

    以下是一个基本的示例，展示如何使用topogram.js创建一个简单的cartogram：

    首先，确保你已经安装了D3.js和topogram.js。你可以通过npm安装它们：

    npm install d3 topogram

    然后，在HTML文件中引入这些库：

    <script src="https://d3js.org/d3.v6.min.js"></script>
<script src="node_modules/topogram/topogram.min.js"></script>

    接下来，创建一个SVG元素来容纳你的cartogram，并准备你的数据。这里是一个简单的例子：

    <body>
  <svg id="cartogram" width="960" height="600"></svg>
</body>

    现在，使用D3.js加载数据并创建cartogram：

    var svg = d3.select("#cartogram");

// 假设你有一个包含地理信息和值的数据数组
var data = [
  { name: "state1", value: 100 },
  { name: "state2", value: 200 },
  // 更多状态...
];

// 加载地理数据，这里假设是 topojson 形式
d3.json("path/to/your/topojson/file.json").then(function(geoData) {
  var projection = topogram.cartogram()
    .datum(geoData)
    .regionKey(function(d) { return d.properties.name; }) // 根据你的数据结构调整
    .value(function(d) { return data.find(e => e.name === d.properties.name).value; });

  var paths = svg.selectAll("path")
    .data(projection.path());

  paths.enter().append("path")
    .attr("d", projection.path())
    .attr("fill", "steelblue");

  // 更新地图形状以反映数据
  projection.update(data);

  // 更新路径以反映新的形状
  paths.attr("d", projection.path());
});

    这个例子假设你有一个包含地理信息（如州名）和对应值的数组，以及一个.topojson文件，其中包含了地理边界信息。你需要根据你的实际数据和文件路径进行调整。

    如果地图没有变形，检查以下几点：

    1. 确保regionKey函数正确匹配了数据和地理数据中的键。
    2. value函数是否正确地从数据数组中提取值。
    3. 地理数据是否正确加载，并且与你的数据相匹配。
    4. projection.update()是否在正确的数据上调用。

    如果问题仍然存在，提供更具体的数据和错误描述，以便我能进一步协助你。

    评论 编辑记录

报告相同问题？

  • 如何使用前端绘图库（D3.js、Chart.js等）？
    2023-10-19 08:58
    几何心凉的博客 如何使用前端绘图库（D3.js、Chart.js等）？
  • topogram.github.io:地形图网站
    2021-05-23 20:23
    Topogram是一个基于Web的应用程序，用于可视化网络随时间和空间的演变。 可以在在线尝试或自行安装。 特征 图形中基于时间的导航 网络布局+地理数据 通过API在线/实时数据更新 输入数据 当前，最简单的输入数据方法...
  • AI 医生“战疫”在前线
    2020-02-07 19:37
    CrisAppleYan的博客 作者| Just出品|CSDN（CSDNnews）紧急驰援疫区，AI医生也出动了。截止到2月6日，随着新冠病毒...而借助AI技术可以高效的辅助当前新冠肺炎病例的大规模筛查和诊疗，有助于及时发现潜在患者，加强防控。此前，阿里、百...
  • Coding and Paper Letter（三十四）
    2018-10-11 17:08
    胖胖雕的博客 1.R语言包fps，通过Fantope投影和选择的稀疏PCA的R包。 fps 2.Javascripts库，用于可视化统计分布。 stat distributions js 3.R语言包BayesFactor，通用的统计模型，用于贝叶斯数据分析。 BayesFactor 4.R语言包...
  • DICOM协议学习笔记（一）
    2019-05-22 17:23
    Dear_dou的博客 DICOM就是医学数字成像和传输协议（Digital Imaging and COmmunications in Medicine） 的简称，是：数据传输、存储和显示协议的总和。 说到 DICOM 必须要说PACS （图像传输和归档系统（Picture Archiving and ...
  • AI 医疗公司“战疫”在前线
    2020-02-09 15:42
    AI科技大本营的博客 作者| Just来源 |CSDN（CSDNnews）紧急驰援疫区，涉足AI+医疗领域的公司也出动了。截止到2月6日，随着新冠病毒肺炎疫情的不断发展，全国累计已有31161例确诊病例...
  • 【今日CV 计算机视觉论文速览 92期】 2 Apr 2019
    2019-04-02 22:49
    hitrjj的博客 了解现实世界物体的空间布局和性质对于许多复杂的工程任务（包括自主导航）至关重要。深度学习已经彻底改变了3D环境中任务的最新性能，然而，在对抗环境中这些方法的稳健性知之甚少。由于缺乏全面的分析，很难证明在...
  • symfony nusoap complextype
    2017-01-20 15:51
    xyz1253587469的博客 参考文章： 这里写链接内容 这里写链接内容特此记录，备忘。
  • 探索地理数据的美妙世界 - Topogram
    2024-03-17 09:33
    杭律沛Meris的博客 Topogram是一个JavaScript库，用于创建交互式等高线地图。它支持WebGL渲染，可以将任何带有经度、纬度和高度信息的数据转换为等高线图。 Topogram能用来做什么？ Topogram可以用来帮助你更好地理解和展...
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 5月5日
  • 创建了问题 5月3日

悬赏问题

  • ¥15 代码在keil5里变成了这样怎么办啊，文件图像也变了，
  • ¥20 Ue4.26打包win64bit报错，如何解决？(语言-c++)
  • ¥15 clousx6整点报时指令怎么写
  • ¥30 远程帮我安装软件及库文件
  • ¥15 关于#自动化#的问题：如何通过电脑控制多相机同步拍照或摄影（相机或者摄影模组数量大于60），并将所有采集的照片或视频以一定编码规则存放至规定电脑文件夹内
  • ¥20 深信服vpn-2050这台设备如何配置才能成功联网？
  • ¥15 Arduino的wifi连接，如何关闭低功耗模式？
  • ¥15 Android studio 无法定位adb是什么问题？
  • ¥15 C#连接不上服务器，
  • ¥15 angular项目错误