时间戳

首页 > 解决方案 > D3 地图 - 如何在 JSON 数据中包含 SVG 图像文件以创建自定义位置标记？

javascript - D3 地图 - 如何在 JSON 数据中包含 SVG 图像文件以创建自定义位置标记？

问题描述

我试图弄清楚如何在我的 json 数据中包含 svg 图标图像，以便相关图标将在相应坐标处显示为标记。

我已经将文件中的数据按照所看到的物体形状分隔（我正在绘制 20 世纪的不明飞行物目击事件），并且我还为每个形状创建了一个 svg 图像文件。

我不确定将图像连接到数据的最佳方法是什么。（我是一个相对初学者）。这是一个视觉效果来帮助解释我的意思：

{ “日期”：“1989 年 10 月 21 日”，“形状”：“三角形”，“纬度”：-41.05446，“经度”：-130.72728，“颜色”：“紫罗兰色”}，

然后我在“icons”文件夹中有一个相应的“Triangle.svg”图标。我确信解决方案并不复杂，我只是没有看到它。任何人都可以帮忙吗？

标签： javascriptjsonreactjssvgd3.js

解决方案

从 JSON 切换到 JS 并使用以下结构会更容易：

import TRIANGLE from '../path/to/triangle.svg';

const data = {
  date: '10/21/1989',
  shape: TRIANGLE,
  latitude: -41.05446,
  longitude: -130.72728,
  color: 'violet',
}

如果您从 API 接收数据，请尝试获取公用文件夹的全名和路径。因此，您可以将图像引用为：

<img src={process.env.PUBLIC_URL + '/triangle.svg'} /> // here change triangle for your shape, in a loop or the way you render them.

有关 PUBLIC_URL 的更多信息：https ://create-react-app.dev/docs/using-the-public-folder/

推荐阅读