angular - geojson 无法填充我们的区域地图
问题描述
我需要以不同的颜色显示美国的几个地区,我已经从http://geojson.io/生成了 json ,但它并没有为我填充。
const containerElement = document.querySelector('.country-map-container');
const containerWidth = containerElement.clientWidth;
const width = containerWidth; // 700;
const height = 450;
const projection = d3.geoMercator()
.scale(700)
.translate([width / 2, height / 1.45])
.rotate([95, -30]);
const path = d3.geoPath()
.projection(projection);
const svg = d3.select('#country-map').append('svg')
.attr('width', width)
.attr('height', height);
const color = d3.scaleOrdinal([`#42C9C2`, `#0D7575`, `#FF736A`]);
let g = svg.append('g');
Promise.all([
d3.json('assets/json/us.json'),
d3.json('assets/json/US_Regions.json'),
]).then((data) => {
g.selectAll('.states')
.data(data[0].features)
.enter()
.append('path')
.attr('class', 'states')
.attr('d', path);
g.selectAll('.region')
.data(data[2].features)
.enter()
.append('path')
.attr('class', 'region')
.attr('d', path);
});
us.json - https://gist.github.com/poulomibasu/6c1242887d8bcc1304fe9872632d62a3 us_region.json - https://gist.github.com/poulomibasu/d3bbe40283bc1042f4fc5820f4480382
样式.css -
.states {
fill: #e8e8e8;
stroke: white;
stroke-width: 1;
opacity: 0.85;
}
.region {
fill: lightcyan;
stroke: black;
stroke-width: 1;
opacity: 0.85;
}
解决方案
推荐阅读
- python - Python - 使用 Pandas 在 Data Frame 中从 itunes 设置 JSON 数据
- apache-spark - spark 构建 1-1、1-M 关系?
- css - 使用 flexbox(行和列)构建网格系统的数学原理是什么?
- fox-toolkit - Fox-Toolkit 配置颜色
- python - 如何在不收到错误消息的情况下导入 tensorflow?
- powerbi - Power BI - 从同一行中减去值
- python - 'tee' 不是内部或外部命令、可运行程序或批处理文件
- java - Java 将图像附加到 JTextArea
- angular - Angular 9 单元测试业力
- python - 如何使用 matplotlib 让图例显示在图表中