个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
34
4
我想知道当我点击 D3 世界地图时如何获取它返回的国家/地区名称。我尝试过检查 DOM，但我似乎无法弄清楚国家/地区名称、代码或人口如何与映射相关联。
模板是从这里撕下来的 https://d3-graph-gallery.com/graph/choropleth_basic.html
// The svg
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
const path = d3.geoPath();
const projection = d3.geoMercator()
.scale(70)
.center([0, 20])
.translate([width / 2, height / 2]);
// Data and color scale
let data = new Map()
const colorScale = d3.scaleThreshold()
.domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
.range(d3.schemeBlues[7]);
// Load external data and boot
Promise.all([
d3.json("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"),
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv", function(d) {
data.set(d.name, d.code, +d.pop)
})
]).then(function(loadData) {
let topo = loadData[0]
let mouseClick = function(d) {
d3.selectAll(".Country")
.transition()
.duration(200)
.style("opacity", .8)
d3.select(this)
.transition()
.duration(200)
.style("stroke", "transparent")
console.log(this.name)
}
// Draw the map
svg.append("g")
.selectAll("path")
.data(topo.features)
.join("path")
// draw each country
.attr("d", d3.geoPath()
.projection(projection)
)
// set the color of each country
.attr("fill", function(d) {
d.total = data.get(d.id) || 0;
return colorScale(d.total);
})
// .on("click", mouseClick )
})<script src="https://d3js.org/d3.v6.js"></script>
<svg id="my_dataviz" width="400" height="300"></svg>最佳答案
您需要修改 JavaScript 代码中的 mouseClick 函数。
代码:
<html>
<script src="https://d3js.org/d3.v6.js"></script>
<svg id="my_dataviz" width="400" height="300"></svg>
<script>
// The svg
const svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
// Map and projection
const path = d3.geoPath();
const projection = d3
.geoMercator()
.scale(70)
.center([0, 20])
.translate([width / 2, height / 2]);
// Data and color scale
let data = new Map();
const colorScale = d3
.scaleThreshold()
.domain([100000, 1000000, 10000000, 30000000, 100000000, 500000000])
.range(d3.schemeBlues[7]);
// Load external data and boot
Promise.all([
d3.json(
"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world.geojson"
),
d3.csv(
"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/world_population.csv",
function (d) {
data.set(d.name, d.code, +d.pop);
}
),
]).then(function (loadData) {
let topo = loadData[0];
// Mouse click function
let mouseClick = function (event, d) {
d3.selectAll(".Country")
.transition()
.duration(200)
.style("opacity", 0.8);
d3.select(this)
.transition()
.duration(200)
.style("stroke", "transparent");
console.log(d.properties.name); // Log the country name
};
// Draw the map
svg
.append("g")
.selectAll("path")
.data(topo.features)
.join("path")
// draw each country
.attr("d", d3.geoPath().projection(projection))
// set the color of each country
.attr("fill", function (d) {
d.total = data.get(d.id) || 0;
return colorScale(d.total);
})
.on("click", mouseClick); // Attach the mouseClick function
});
</script>
</html>希望它对您有用。
关于javascript - 如何从 D3 的世界地图中返回国家/地区名称？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/77521115/
34
4
0
这个问题在这里已经有了答案: Where am I? - Get country (10 个答案) How can I get my Android device country code with
有办法检查吗？我有一个应用程序 URL，除非用户有英国应用商店，否则我不想打开该 URL。不幸的是，这个应用程序在许多国家/地区都可用，因此当我在链接上添加“gb”时，它会被重定向到用户的本地区域。
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足 Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以
获取设备当前区域的最佳方法是什么？假设用户在德国并使用意大利语作为设备语言。如果我使用 Locale.getDefault()，那么国家和语言就会相互映射，即语言是it，国家是IT。我想要的是它和DE
有人可以给我一个示例或教程，其中显示国家及其代码的下拉列表我的代码显示错误的新西兰语言代码，它显示 mi-NZ 而不是 en-NZ ASP.NET protected void Page_Load(o
我是 Ajax 和 PHP 的新手，遇到动态下拉国家和州的问题。 虽然我已经检查了 stackOverflow 中的所有答案，但我无法清楚地了解我们应该如何成功地编写代码以获得所需的结果。 count
我一直在开发一个注册表单应用程序，其中使用了几个微调器小部件。微调器用于选择国家、州和城市。因此，这些微调器需要以某种方式相互连接(下面的代码将展示我如何尝试实现这一点)。 表单代码: fragmen
如果你去http://profile.microsoft.com并编辑您的个人信息，您将选择您的国家。选择国家/地区后，城市和/或州信息会根据该国家/地区的预期变化。有没有人有任何关于如何实现这一目标
我有一个带有经纬度坐标的 data.frame: df<-data.frame( lat=c(40, 30, 40.864), lon=c(0, 20, 1.274) )
我正在尝试在将与 django-allauth 一起使用的注册表中添加 django-countries。按照说明 https://github.com/SmileyChris/django-coun
嗨，我想为国家和州实现下拉列表。州下拉列表应根据所选国家/地区更改其值。 是否有任何插件或 gem 可以在 Rails 中执行此操作。 最佳答案 试试卡门插件: http://autonomousma
我的服务器上安装了基于PHP的Youtube克隆系统。 几个国家使用相同的系统。假设我有3个域都指向同一系统: www.site.hr www.site.ba www.site.rs 他们都重定向到一
在我的 Azure DNS 和域提供商中设置后，我想使用我的国家/地区域名 mydomain.id，但我仍然无法在应用服务中验证我的域。我已经仔细检查了所有内容，我认为我的设置已经正确。现在我想知道我
最近，我们开始遇到向网络应用程序的用户呈现过时的国家/地区列表的问题。 我们目前有一些数据库表来存储本地化的国家/地区名称及其地区(州)。然而，随着地球的发展，该列表在不断演变，并且事实证明维护起来很
This is the third iteration of this question as errors have been solved (在一些人的感激帮助下)。为了避免对到底发生了什么感到困
全部， 我们的应用程序需要有关 ISO 国家和货币的数据(其中数据必须是最新的)。我们确实从 ISO 自己购买了国家/货币数据，但是我们仍然需要对数据执行大量手动操作，以及编写我们自己的工具来读取数据
已结束。此问题正在寻求书籍、工具、软件库等的推荐。它不满足Stack Overflow guidelines 。目前不接受答案。 我们不允许提出寻求书籍、工具、软件库等推荐的问题。您可以编辑问题，以便
我想使用 PHP 和 jQuery 执行以下操作 https://www.careerbuilder.com/share/register.aspx?sc_cmp1=JS_LoginASPX_RegN
假设我们有一个包含所有国家/地区代码的代码列表。国家代码是 Countries 表的主键，它在数据库中的许多地方用作外键。在我的应用程序中，国家通常显示为多个表单的下拉列表。 一些过去曾经存在的国家不
我想根据语言环境获取当前日期/时间。如果我传递 locale 对象，我需要获取国家/地区的相关日期/时间。 最佳答案 从 Java 8 开始，您有 LocalDateTime 和 ZonedDateT
我是一名优秀的程序员,十分优秀！