html - 没有出现图例,但代码中没有错误(?)
问题描述
我想用我的 3 个类(a、b 和 c)创建一个图例,但图例没有出现在我的 localhost 网络地图上。我找不到任何错误。这是我正在处理的任务:https ://github.com/NieneB/webmapping_for_beginners_v2/wiki/D3-step-3
我试图将图例的代码移动到另一个地方,但这似乎不起作用。如果有任何 ;)} 等丢失,我已经检查了代码。
And these are some of my codes:
<h1>Bigfoot Field Researchers Organizations</h1>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
//Width and height
var w = 1000;
var h = 800;
//Create SVG
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
// create a new SVG group element
var layerWorld = svg.append('g');
//Load in GeoJSON data
var data = d3.json("world_simple.json", function(error, data){
if (error) console.log(error);
return data
});
// create a new SVG group element
var layerYeti = svg.append('g');
//Load in GeoJSON data
var yetiData = d3.json("All_BFRO_Reports_points.json", function (error, data) {
if (error) console.log(error);
return data
});
Promise.all([data, yetiData]).then(function (values){
console.log(values[1])
console.log(data)
//Bind data and create one path per GeoJSON feature
layerWorld.selectAll("path")
.data(values[0].features)
.enter()
.append("path")
.attr("class", "countries")
.attr("d", path)
.style("fill", function(d){
return color(d.properties.pop_est)})
.style("stroke", "#5a5959")
.on("mouseover", handleMouseOver)
.on("mouseout", handleMouseOut);
layerYeti.selectAll("circle")
.data(values[1].features)
.enter()
.append("circle")
.attr("cx", function(d) {
//[0] returns the first coordinate (x) of the projected value
return projection(d.geometry.coordinates)[0];})
.attr("cy", function(d) {
//[1] returns the second coordinate (y) of the projected value
return projection(d.geometry.coordinates)[1];})
.attr("r", 2)
.style("fill", function(d){
if (d.properties.styleUrl == "#a") {return "red"}
else if (d.properties.styleUrl == "#b") {return "blue"}
else { return "yellow"}
})
.style("opacity", 0.75);
//Create Legend
var legend = d3.select("body")
.append("svg")
.attr("class", "legend")
.attr("width", 200)
.attr("height", 300);
})
var unique_values = d3.map(data.features, function(d){return d.properties.styleUrl;}).keys();
console.log(unique_values);
解决方案
推荐阅读
- java - @Schedule time 错误的时间
- javascript - Rails 6使用has_many关系和accepts_nested_attributes_for连接表
- wordpress - WordPress:数据库可能需要修复
- excel - 如何使 VBA 代码更快/更高效
- python - 如何从 python 中的文本文件中删除换行符,使其更易于使用
- r - 如何更改 flextable 标题布局?
- c++ - (如何)使用特定格式的单个 'cin' 语句一次输入 2 个值
- python-3.x - 如何使用opencv(python)读取文件夹中的第一张图像
- python - 将变量从类内部的函数中获取到python中的单独类函数中
- sql - 如何根据SQL中的列字段将行转换为SQL中的列