Javascript 通过d3js绘制圆并转换坐标_Javascript_Html_D3.js

Javascript 通过d3js绘制圆并转换坐标

javascript html d3.js

Javascript 通过d3js绘制圆并转换坐标,javascript,html,d3.js,Javascript,Html,D3.js,我有以下d3js代码，它通过d3.json和renderMap函数基于geojson绘制国家地图。我想将城市添加到地图中，并将其表示为圆形。城市将与国家地图位于同一svg中。城市位于ua\u Cities\u admin.csv中，并通过renderCity功能进行渲染我不了解的是如何将renderCity中的数据数组放置在svg组件中，以及如何将城市坐标映射到国家地图在此方面的任何帮助都将不胜感激 <!DOCTYPE html> <meta charset="

我有以下d3js代码，它通过

d3.json

和

renderMap

函数基于geojson绘制国家地图。我想将城市添加到地图中，并将其表示为圆形。城市将与国家地图位于同一svg中。城市位于

ua\u Cities\u admin.csv

中，并通过

renderCity

功能进行渲染

我不了解的是如何将

renderCity

中的数据数组放置在svg组件中，以及如何将城市坐标映射到国家地图

在此方面的任何帮助都将不胜感激

<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>geoPath measures</title>
</head>

<body>
<div align="center">
<svg id="my_dataviz"></svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js"></script>

<script>
  var height = window.innerHeight - 100;
  var width = window.innerWidth - 100;
  var svg = d3.select('#my_dataviz')
    .attr("width", width)
    .attr("height", height);
  
function renderMap(data) {
  var projection = d3.geoIdentity().reflectY(true).fitSize([width, height], data)
  var geoGenerator = d3.geoPath().projection(projection);
  svg.append("g")
    .selectAll("path")
    .data(data.features)
    .enter()
    .append('path')
    .attr('d', geoGenerator)
    .attr('fill', 'steelblue');
};

function renderCity(data) {
  var projection = d3.geoIdentity().reflectY(true).fitSize([width, height], data)
  console.log(data)
  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", 50)
    .attr("cy", 50)
    .attr("r", 3);
};

d3.json('https://raw.githubusercontent.com/EugeneBorshch/ukraine_geojson/master/Ukraine.json', renderMap);
d3.csv('ua_cities_admin.csv', renderCity);
</script>
</body>
</html>


地质路径措施
变量高度=window.innerHeight-100；
变量宽度=window.innerWidth-100；
var svg=d3.select（'my#u dataviz'）
.attr（“宽度”，宽度）
.attr（“高度”，高度）；
函数renderMap（数据）{
var projection=d3.geointity（）.reflectY（true）.fitSize（[width，height]，data）
var geoGenerator=d3.geoPath（）.projection（projection）；
svg.append（“g”）
.selectAll（“路径”）
.数据（数据.特征）
.输入（）
.append（'路径'）
.attr（'d'，地球发电机）
.attr（'fill'，'steelblue'）；
};
函数呈现（数据）{
var projection=d3.geointity（）.reflectY（true）.fitSize（[width，height]，data）
console.log（数据）
svg.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，50）
.attr（“cy”，50）
.attr（“r”，3）；
};
d3.json（'https://raw.githubusercontent.com/EugeneBorshch/ukraine_geojson/master/Ukraine.json，renderMap）；
d3.csv（“ua_cities_admin.csv”，renderCity）；

ua_cities_admin.csv文件包含以下字段：

```
城市
```
```
lat
```
液化天然气

您有两个输入数据集，包括地理数据、geojson文件和csv文件。两者都使用经纬度作为坐标系
您希望投影它们，但希望它们共享相同的投影坐标系，以便它们彼此对齐

var projection = d3.geoMercator()
var geoGenerator = d3.geoPath().projection(projection);

function renderMap(data) {
  projection.fitSize([width, height], data)   
  svg.append("g")
    .selectAll("path")
    .data(data.features)
    .enter()
    .append('path')
    .attr('d', geoGenerator)
    .attr('fill', 'steelblue');
};

function renderCity(data) {
  svg.selectAll("circle")
    .data(data)
    .enter()
    .append("circle")
    .attr("cx", d=>projection([d.lon,d.lat])[0])
    .attr("cy", d=>projection([d.lon,d.lat])[1])
    .attr("r", 3);
};

 d3.json("file", function(geojson) {
   d3.csv("file", function(csv) {
       renderMap(geojson);
       renderCity(csv);
    })
 })

Projection.fitSize（）

projection.fitSize（）

fitSize

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [longitude, latitude]
  },
  "properties": { /* ... */ }
}

var features = data.map(function(d) {
    return {     
      "type": "Feature",
      "geometry": {
         "type": "Point",
         "coordinates": [d.lng, d.lat]
      },
      "properties": { "name":d.city }
    }
})

var featureCollection = { type:"FeatureCollection", features:features }

投影与身份对比

fitSize（）

手动设置投影参数

fitSize（）

projection.scale（）

projection.translate（）

fitSize（）