加载美国邮政编码topojson文件后,我在d3.js中收到错误 groupdata在这一行是未定义的:
function bind(group, groupData) {
var i, n = group.length, m = groupData.length, n0 = Math.min(n, m), updateNodes = new Array(m), enterNodes = new Array(m), exitNodes = new Array(n), node, nodeData;
错误:
Uncaught TypeError: Cannot read property 'length' of undefined
我调用和创建路径的代码是:
d3.json("data/us-atlas/us-zipcodes.json", function(error, topology) {
svg.selectAll("path")
.data(topojson.feature(topology, topology.objects.zipcodes).features)
.enter()
.append("path")
.attr("d", path)
});
我从这个repo生成了zipcode topojson文件:https://github.com/mbostock/us-atlas.当我在加载时检查拓扑对象时,我在topology.objects.zipcodes下看到了32893个弧.
我已经用chloropleth示例http://bl.ocks.org/mbostock/4060606成功加载了县,并使用了类似的模式.
我正在使用d3.js版本3.2.8和topojson.js版本1.2.3.
有任何想法吗？它是一个糟糕的zipcode文件还是我称错了？
我在我的MacOs 10.7.5上安装了gdal 1.10.1和topojson 1.4.0.我已经下载了ne_110m_ocean表格Natural Earth.
我成功地在GeoJSON中转换了形状文件:
ogr2ogr \
-f GeoJSON \
ocean.json \
ne_110m_ocean.shp
然后我将GeoJSON转换为topojson:
topojson \
-o ocean_tj.json \
ocean=ocean.json \
当我使用GeoJSON文件绘图时,一切正常.
d3.json("ocean.json", function(json) {
svg.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.style("fill", "steelblue");
});
当我使用topojson文件绘图时,我得到了土地的多边形而不是海洋的多边形!
d3.json("ocean_tj.json", function(topology) {
var ocean = topojson.feature(topology, topology.objects.ocean);
svg.append("path")
.datum(ocean)
.attr("d", path)
.style("fill", "red");
});
有人可以帮忙吗？
提前致谢
我正在尝试添加一个显示区域名称的工具提示,当您将鼠标悬停在d3.js中的地图上时.输入是一个topojson文件,我已经能够成功生成带有区域边界的地图,并突出显示当前选定的区域.
对于提示我试图做类似的东西这个,但没有任何反应都没有.我用过的代码如下.工具提示代码即将结束.
var width = 960,
height = 600;
var projection = d3.geo.albers()
.center([87, 28])
.rotate([-85, 0])
.parallels([27, 32]);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
svg.append("rect")
.attr("width", width)
.attr("height", height);
var g = svg.append("g");
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 1e-6);
d3.json("data/nepal3.json", function(error, npl) {
var districts = topojson.feature(npl, npl.objects.nepal_districts);
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(districts),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) …我有一个具有平移和缩放功能的拓扑图.
单击该国家/地区,我将缩放/平移到该国家/地区,使用此:
if (this.active === d) return
var g = this.vis.select('g')
g.selectAll(".active").classed("active", false)
d3.select(path).classed('active', active = d)
var b = this.path.bounds(d);
g.transition().duration(750).attr("transform","translate(" +
this.proj.translate() + ")" +
"scale(" + .95 / Math.max((b[1][0] - b[0][0]) / this.options.width, (b[1][1] - b[0][1]) / this.options.height) + ")" +
"translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
g.selectAll('path')
.style("stroke-width", 1 / this.zoom.scale())
但是,如果我继续拖动平移,则在平移之前,地图会重新回到初始位置,然后再进行平移.平移/缩放代码在这里:
this.zoom = d3.behavior.zoom().on('zoom', redraw)
function redraw() {
console.log('redraw')
_this.vis.select('g').attr("transform","translate(" +
d3.event.translate.join(",") + ")scale(" …D3js数据文件大小的限制因素是什么？是文件从服务器加载到客户端需要多长时间？
我正在尝试创建芝加哥的路线图,在那里你可以将鼠标悬停在路上以获得它的名字并突出显示它.该文件的大小为125 MB.我通过删除不必要的信息将其剥离到30 MB,然后将其转换为TopoJSON文件,将其降至5.1 MB.这是一个不守规矩的文件大小？
给定shapefile:
鉴于我们想重新投影D3js数据,我们可以在不同级别重新投影.
1.获取重新投影的shapefile(1),使用ogr2ogr:
ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:...' output.shp input.shp
或者2.使用(npm)得到一个重新投影的topojson(2)topojson.js:
topojson \
-o output.topo.json
--projection 'd3.geo.albersUsa()' \
-q 1e5 \
-s 1 \
-- input.shp
或3.获得重新投影的D3js数据/ SVG(1),D3js代码包括:
var path = d3.geo.path()
.projection(d3.geo.albersUsa()) // unsure of this syntaxe, confirmation welcome, just delete this comment.
概述:
Mike Bostock>预计Topojson告诉我们,第一和第二种方式"消除了在渲染时投射几何体的需要,提高了性能[...]因为每个点的重要性是在屏幕上而不是在地球表面上测量的".简而言之,最终像素质量/文件重量比更好.
另一方面,在渲染时重新投影几何体允许更灵活的最后一分钟投影.
了解更多？
这就是我所知道的.如果有人可以解释这些方法的更多信息,分享帮助资源的参数(ogr的EPSG列表,d3js预测列表),以及各自的各自的好处/弱点,它可能是一个非常有趣的并行手册.
注意:我会给出我的答案,但我只是开始挖掘它.我想周围有更多有经验的人.
我正在尝试复制Jason Davies"旋转世界"可视化中显示的缩放功能(https://www.jasondavies.com/maps/rotate/)
我可以旋转和缩放,但是,如果我在旋转后进行缩放,我的投影会以一个角度缩放(意味着,如果我将地球向左转15度然后缩放,则地球不再保持在画布中心) .以下是我的代码,任何帮助将不胜感激!
d3.select(window)
.on("mousemove", mousemove)
.on("mouseup", mouseup);
var width = 960,
height = 500;
var proj = d3.geo.orthographic()
.scale(220)
.translate([width / 2, height / 2])
.clipAngle(90);
var path = d3.geo.path().projection(proj).pointRadius(1.5);
var graticule = d3.geo.graticule();
var svg = d3.select("#content").append("svg")
.attr("width", width)
.attr("height", height)
.on("mousedown", mousedown);
var zoom = d3.behavior.zoom()
.center([width / 2, height / 2])
//.scaleExtent([.5, 10])
.on("zoom", zoomed);
svg.call(zoom);
queue()
.defer(d3.json, "/static/json/world.json")
.await(ready);
function ready(error, world) {
/*
Define gradients
*/
// ocean
var ocean_fill = …我正在尝试使用leaflet和topojson图层创建交互式地图.我想做以下事情:
1-当单击某个topojson多边形时,它应该被删除.
2-当单击另一个多边形时,应该将其删除,并且应该添加先前单击的多边形.
所以基本上一直只有一个多边形不存在.这是地图的代码块:
function addRegions(map) {
var regionLayer = new L.TopoJSON();
$.getJSON('map-developmentregions.topo.json').done(addRegionData);
function addRegionData(topoData){
regionLayer.addData(topoData);
regionLayer.addTo(map);
regionLayer.eachLayer(handleLayer);
}
function handleLayer(layer) {
layer.setStyle({
fillColor : getColor(getNewsCount(layer.feature.properties.REGION)),
weight: 2,
opacity: 1,
color: 'white',
fillOpacity: 1
});
layer.on({
mouseover : enterLayer,
mouseout: leaveLayer,
click: clickAction
});
}
//Here's the code for clickAction... this is where I suppose the code should be placed
function clickAction(e) {
var layer = e.target;
map.removeLayer(layer);
}
}
到目前为止,这段代码允许我点击topojson多边形来删除它,但是一旦点击了另一个多边形,我就无法想到如何检索先前删除的多边形.
我想我应该将每个多边形与多边形的总数进行比较,并在删除当前单击的多边形之前添加缺少的多边形,但我无法执行该多边形.
请帮忙.谢谢
我正在尝试创建一个可视化某些数据的交互式地图.
我使用了传单贴图和topojson图层.接下来,我尝试使用leaflet标签插件在每个topojson多边形上添加静态标签,即标签应始终在那里,不应对mouseover事件做出反应.
我尝试使用实现bindLabel()方法noHide:true,但它似乎没有工作.因此,我在传单(geojson)多边形上实现了提供给这个问题的简单标签的解决方案.我成功地添加了静态标签.
然后,我有一个函数删除click事件上的topojson多边形.我本来应该删除这个特殊多边形上的标签,但它似乎无法实现.
这是我添加topojson图层和标签的方法:
function addRegions(map) {
var regionLayer = new L.TopoJSON();
$.getJSON('region.topo.json').done(addRegionData);
function addRegionData(topoData) {
regionLayer.addData(topoData);
regionLayer.addTo(map);
regionLayer.eachLayer(addLabel);
regionLayer.eachLayer(handleLayer);
}
function handleLayer(layer) {
layer.on({
click: clickAction
});
}
// Here's the code for adding label
function addLabel(layer) {
var label = new L.Label();
label.setContent(layer.feature.properties.REGION);
label.setLatLng(layer.getBounds().getCenter());
map.showLabel(label);
}
// Here's the code that removes a polygon when it is clicked and retains the previously removed polygon
function clickAction(e) {
regionLayer.eachLayer(function(layer){
map.addLayer(layer); …我正在使用react-d3-map-bubble库来绘制美国地图。反应库- https://github.com/react-d3/react-d3-map-bubble
使用的美国地图 json 文件 - https://d3js.org/us-10m.v1.json
我的目标是在地图上绘制点。
在当前的js文件中，counties对象使用弧线并在美国地图上绘制不同的点。请参阅此处的图片说明 - https://bl.ocks.org/mbostock/9943478
我有纬度和经度而不是弧/多边形。因此，在 json 文件中，我将使用以下示例更改“国家”对象：
{
"type": "GeometryCollection",
"geometries": [
{
"type": "Point",
"properties": {
"name": "Some place in New Mexico",
"population": 54590
},
"arcs": [
[]
],
"coordinates":[33.500142,-111.929818]
}
]
}
使用 US json 中给定的转换函数，我无法将给定的坐标放置到地图上的正确位置。
变换函数
"transform": {
"scale": [0.09996701564084985, 0.058373467440357915],
"translate": [-56.77775821661018, 12.469025989284091]
}
所以，
或者