大佬教程收集整理的这篇文章主要介绍了使用 D3.js 渲染 topoJSON 数据，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
在我的项目中，我尝试使用 d3 和 GeoJsON 显示印度地图。它无法正常工作，我发现很难显示每个印度州。请帮我找出来，在此先感谢...， 我在代码下方添加了数据和输出的链接。
这是我的源代码，我使用来自 https://www.covid19india.org/mini_maps/india.json 的数据，我想使用 D3.Js 渲染（印度各州）
<HTML>
<head>
<Meta charset="utf-8">
<title>A D3 map using topoJson</title>
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/d3/3.5.5/d3.min.Js"></script>
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/queue-async/1.0.7/queue.min.Js"></script>
<script src="https://cdnjs.cloudFlare.com/AJAX/libs/topoJson/1.6.19/topoJson.min.Js"></script>
<link href="http://Fonts.GoogleAPIs.com/CSS?family=Montserrat" rel="stylesheet" type="text/CSS">
<style>
path {
fill: #ccc;
stroke: #fff;
stroke-wIDth: .5px;
}
path:hover {
fill: red;
}
</style>
</head>
<body>
<script>
var wIDth = 900,height = 600;
var path = d3.geo.path();
var svg = d3.SELEct("body").append("svg")
.attr("wIDth",wIDth)
.attr("height",height);
queue()
.defer(d3.Json,"https://www.covID19india.org/mini_maps/india.Json")
.await(ready);
function ready(error,countIEs) {
svg.append("g")
.SELEctAll("path")
.data(topoJson.feature(countIEs,countIEs.objects.elE).features)
.enter()
.append("path")
.attr("d",path)
.attr("class","state");
}
</script>
</body>
</HTML>@H_673_11@
我得到这种类型的输出
你能帮我看看有什么问题吗？我是一名学生，正在学习这个。
由于您的 JSON 已经被投影，您只需要将 null@H_673_11@ 传递给投影：
var path = d3.geo.path()
.projection(null);
@H_673_11@这是您的更改代码：
<html>
<head>
<meta charset="utf-8">
<title>A D3 map using topojson</title>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/queue-async/1.0.7/queue.min.js"></script>
<script src="https://cdnjs.cloudFlare.com/ajax/libs/topojson/1.6.19/topojson.min.js"></script>
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<style>
path {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
}
path:hover {
fill: red;
}
</style>
</head>
<body>
<script>
var width = 900,height = 600;
var path = d3.geo.path()
.projection(null);
var svg = d3.SELEct("body").append("svg")
.attr("width",width)
.attr("height",height);
queue()
.defer(d3.json,"https://www.covid19india.org/mini_maps/india.json")
.await(ready);
function ready(error,counties) {
svg.append("g")
.SELEctAll("path")
.data(topojson.feature(counties,counties.objects.states).features)
.enter()
.append("path")
.attr("d",path)
.attr("class","state");
}
</script>
</body>
</html>@H_673_11@,
嗨，我曾经有一个名为 covid19news.org 的网站。现在下降了。在那里我做过类似的事情。代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<style>
#map { position: relative; min-height: 500px;
width: 800px;
height: 770px;
BACkground-color: white;
}
.diStrict,.disputed,.state rect,.state path { stroke: #a9a9a9; stroke-width: 1px; }
.diStrict:hover { stroke: #777777; stroke-width: 1px; fill-opacity: .7; }
.state:hover rect { stroke: #777777; stroke-width: 2px; fill-opacity: .7; }
.state:hover path { fill-opacity: .7; }
#SELEct {
position:absolute;
left: 500px;
top: 100px;
font: 12px sans-serif;
color: #333;
}
#tooltip h3 {
margin:2px;
font-size:14px;
}
#tooltip h4 {
margin:2px;
font-size:10px;
}
#tooltip {
position: absolute;
BACkground:rgba(0,0.8);
text-align: left;
border:1px;
border-radius:5px;
font: 12px sans-serif;
width:auto;
padding:4px;
color:white;
opacity:0;
pointer-events: none;
}
#tooltip table{
table-layout:fixed;
}
#tooltip tr td{
padding:2px;
margin:0;
}
</style>
</head>
<body>
<div id="map">
</div>
<script src="./topo/d3.v3.min.js" charset="utf-8"></script>
<script src="./topo/d3-queue.v3.min.js"></script>
<script src="./topo/topojson.v1.min.js"></script>
<script>
function diStrictMap(diStricts,disputed) {
var width = 800,height = 700,scale = 1200;
var propTag = 'zone',ttName = 'Zone',unit = '';
var extraTop = 0,extraLeft = 0;
function render(SELEction) {
SELEction.each(function() {
d3.SELEct(this).SELEct("svg").remove();
var svg = d3.SELEct(this).append("svg")
.attr("width",width)
.attr("height",height);
d3.SELEct(this).SELEct("#tooltip").remove();
d3.SELEct(this).append("div").attr("id","tooltip").style("opacity",1);
var projection = d3.geo.mercator()
.center([83,23])
.scale(scalE)
.translate([width / 2,height / 2]);
var path = d3.geo.path().projection(projection);
svg.SELEctAll(".diStrict")
.data(diStricts.features)
.enter().append("path")
.attr("class","diStrict")
.style("fill",function(d) { return 'd.properties.zone.toLowerCase();' })
.attr("d",path)
.on("mouseover",function(d) {
d3.SELEct("#tooltip").transition()
.duration(200)
.style("opacity",.9);
d3.SELEct("#tooltip").html("<h3>"+(d.id)+"</h3><h4>("+(d.properties.NAME_1)+")</h4><table>"+
"<tr><td>"+ttName+"::</td><td>"+(d.properties[propTag])+"</td></tr>"+
"</table>")
.style("left",(d3.event.pageX-document.getElementById('map').offsetLeft - extraLeft) + "px")
.style("top",(d3.event.pageY-document.getElementById('map').offsetTop - 160 - extraTop) + "px");
})
.on("mouseout",function(d) {
d3.SELEct("#tooltip").transition()
.duration(500)
.style("opacity",1);
});
svg.SELEctAll(".disputed")
.data(disputed.features)
.enter().append("path")
.attr("class","disputed")
.style("fill",function(d) { return d.color; })
.attr("d",path);
});
} // render
render.height = function(value) {
if (!arguments.length) return height;
height = value;
return render;
};
render.width = function(value) {
if (!arguments.length) return width;
width = value;
return render;
};
render.scale = function(value) {
if (!arguments.length) return scale;
scale = value;
return render;
};
render.propTag = function(value) {
if (!arguments.length) return propTag;
propTag = value;
return render;
};
render.ttName = function(value) {
if (!arguments.length) return ttName;
ttName = value;
return render;
};
render.unit = function(value) {
if (!arguments.length) return unit;
unit = value;
return render;
};
return render;
} // diStrictMap
(function() {
d3.queue()
.defer(d3.json,"./topo/zone-data.json")
.defer(d3.json,"./topo/Kashmir.json")
.await(function(error,topoMain,topoKashmir) {
var diStricts,disputed;
if (error) throw error;
diStricts = topojson.feature(topoMain,topoMain.objects.IND_adm2);
disputed = topojson.feature(topoKashmir,topoKashmir.objects.ne_10m_admin_0_Kashmir_Occupied);
colorDisputed(disputed.features);
// Map render
var map = diStrictMap(diStricts,disputed).width(800).height(700).scale(1200); //.propTag(filter);
d3.SELEct("#map").call(map);
});
}());
function colorDisputed(data) {
var color = "#eaeafa";
data.forEach(function(d) {
d.color = color;
});
}
</script>
</body>
</html>
@H_673_11@完整的工作代码在这里。 stackblitz
,@Gerardo above 提供的答案适用于 D3 v3。
对于寻找 D3 v6 的任何人，以下是解决方案。
注意：在 D3 v6 中 d3.geo.path()@H_673_11@ 已更改为 d3.geoPath()@H_673_11@
// Reference: https://stackoverflow.com/a/66622694/6908282
var width = 900,height = 600;
var path = d3.geoPath()
.projection(null);
var svg = d3.SELEct("body").append("svg")
.attr("width",height);
fetch("https://www.covid19india.org/mini_maps/india.json")
.then(response => response.json())
.then(json => {
svg.append("g")
.SELEctAll("path")
.data(topojson.feature(json,json.objects.states).features)
.enter()
.append("path")
.attr("d",path)
.attr("class","state");
});@H_673_11@path {
fill: #ccc;
stroke: #fff;
stroke-width: .5px;
}
path:hover {
fill: red;
}@H_673_11@<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>@H_673_11@以上是大佬教程为你收集整理的使用 D3.js 渲染 topoJSON 数据全部内容，希望文章能够帮你解决使用 D3.js 渲染 topoJSON 数据所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。