贴图不能在D3中渲染
贴图不能在D3中渲染
提问于 2014-04-18 05:19:15
我试着用D3渲染这个简单的地图，但是它什么也没有显示。这是JSON文件a link。我通过jsonlint运行了这个JSON文件，所以我猜这个文件没问题。然而，它并没有显示任何东西。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js" type="text/javascript" ></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8" type="text/javascript"></script>
<link rel="stylesheet" href="#">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<h3>Map</h3>
<div>
<script type="text/javascript">
var projection = d3.geo.mercator()
.scale(29100)
.translate([7310, 3500]);
var path = d3.geo.path();
.projection(projection);
d3.json("pak.json", function(json) {
g.append("g")
.attr("id", "District")
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", d3.geo.path());
});
</script>
</div>
</body>
</html>回答 2
Stack Overflow用户
发布于 2014-04-18 07:10:42
您实际上还没有创建svg，这就是为什么您看不到任何东西的原因。
此外，您的代码中有一些东西会抛出错误。您在没有定义svg和g变量的情况下引用了它们。您用分号将path和.projection隔开。这是你想要做的基本想法，但你需要根据你的数据进行调整：
// setup your path and projection functions
var projection = d3.geo.mercator()
.scale(29100)
.translate([7310, 3500]);
var path = d3.geo.path()
.projection(projection);
// create an svg
var svg = d3.select('body').append('svg')
// give it a size, you'll need to adjust this to fit your needs
.attr('width', 500)
.attr('height', 300)
// load the json file
d3.json('pak.json', function(json) {
// when it loads, create a 'g' element inside the svg
svg.append('g')
.attr('id', 'District')
// bind your data to it
.data(json.features)
// append a 'path' to the 'g' element for each datum
.enter()
.append('path')
// use your path function to construct a path based on the data
.attr('d', path)Stack Overflow用户
发布于 2014-04-18 07:26:59
主要的问题是svg还没有被定义。如果你想在你的页面上使用svg，你需要一个svg画布。在我看来，在复制和粘贴g.append等行时，sv似乎被意外地切断了。
整理好后，需要更新比例和平移以使您的地图可见。您可以使用试错法来获得正确的结果或进行计算。如果你想计算它的话。这个question值得一读。
另一件事是改变了.attr("path", ...)产品线。您已经定义了将生成路径的path变量，因此无需重复，只需调用该变量即可。
// changed the scale and translation to something more suitable var projection = d3.geo.mercator()
.scale(1700)
.translate([-1700, 1200]);
// setup dimensions of svg container
var h = 500,
w = 900;
var path = d3.geo.path()
.projection(projection);
// create svg container (NB this requires a div with id map
var svg = d3.select("#map")
.append("svg")
.attr("height", h)
.attr("width", w);
d3.json("pak.json", function(json) {
// Not sure what this is meant to do
svg.append("g")
.attr("id", "District");
// The last line just needs to call the path variable defined above
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path);
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/23143648
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号