topojson

D3js SVG open lines display a fill artifact, how to fix it?

由 ぃ、小莉子 提交于 2019-12-02 02:16:22
I just added French rivers_lines to my D3js generated SVG. It now display a result like : I need to keep the river lines without the artifact. Data : a topojson made of arcs. CSS code: .rivers { fill: none; fill-opacity: .1; stroke-width:1px; stroke: #C6ECFF; } same result with some colors and opacity near zero: fill: #FF0000; fill-opacity: .1; D3 code: rivers = topojson.feature(fra, fra.objects.rivers), //Append rivers svg.append("path") .datum(rivers) .attr("d", path) svg.selectAll(".rivers") .data(topojson.feature(fra, fra.objects.rivers).features) .enter().append("path") .attr("class",

For some reason, my D3 Map is displaying upside down - how can I flip it?

由 北城以北 提交于 2019-12-02 01:17:01
问题 Have a topoJSON file that I am importing - seems like this should be easy to flip, but I have no idea. Should I be transforming the object after it's created or adjusting the JSON? I tried using some projections, which flipped the object, but distorted it all over the place. <!DOCTYPE html> <meta charset="utf-8"> <style> .counties { fill: blue; } .states { fill: none; stroke: #fff; stroke-linejoin: round; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min

For some reason, my D3 Map is displaying upside down - how can I flip it?

由 泪湿孤枕 提交于 2019-12-01 22:23:49
Have a topoJSON file that I am importing - seems like this should be easy to flip, but I have no idea. Should I be transforming the object after it's created or adjusting the JSON? I tried using some projections, which flipped the object, but distorted it all over the place. <!DOCTYPE html> <meta charset="utf-8"> <style> .counties { fill: blue; } .states { fill: none; stroke: #fff; stroke-linejoin: round; } </style> <svg width="960" height="600"></svg> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script> <script src="https:

基于HTML5的在线地图

由 旧街凉风 提交于 2019-12-01 15:27:41
Qunee for HTML5有许多 地图的示例 ，包括 地铁图 ，基于S VG数据的地图 ，结合 leaflet的地图 等，每个示例都是单独的实现，代码也各有不同，于是我们想，是否能将这些方案统一起来，实现一种地图解决方案呢？于是我们开始整合，从世界地图到国内各市县的地图，再到各种地铁图，都用HTML5技术呈现出来，而在地图之上还有我们的拓扑图，等值分析图，地铁线路分析等等，本文我们将介绍如何使用Qunee加载标准地图数据，实现从世界地图到国内省市地图的呈现 标准地图数据 首先遇到的是地图数据的问题，我们选择支持两种数据格式：GeoJSON和TopoJSON，前者是地理数据的标准格式，各种GIS软件都支持，后者是D3.js用到的一种数据格式，能有效压缩数据文件，Qunee建议使用TopoJSON数据格式 Qunee地图示例 下面以一个hello world示例介绍MapChart的使用 <!DOCTYPE html> <html> <head> <title>地图浏览</title> <meta charset="utf-8"> </head> <body> <div style="height: 600px;" id="canvas"/> <!--加载Qunne和Map相关扩展类库--> <!--Qunee图形组件 --> <script src="http://demo

TopoJSON with strange paths

由 别等时光非礼了梦想. 提交于 2019-12-01 13:57:40
I have an ESRI shapefile in WGS84 and convert it to another with a European Albers projection (EPSG:102013) with ogr2ogr . ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:102013' europe.shp europe_data_wgs84.shp I then convert it to TopoJSON using the following: topojson --id-property iso_a3 -o europe.json -p --simplify-proportion 0.25 --width 900 --height 600 -- countries=europe.shp I then load europe.json via D3 and can successfully display it (by setting the projection to null as it is already projected). Each country of Europe has a class .country . This is what happens when I set .country { fill

How to know if topojson is installed and working normally?

由 ぐ巨炮叔叔 提交于 2019-12-01 13:57:09
How to know if topojson is well installed and working normally? An example tiny file to convert will be appreciate. with both the source and expected result If you haven't stumbled across this yet I found it to be a great walkthrough of the entire process: http://bost.ocks.org/mike/map/ The above link also includes the command to run to check if topojson is installed: $which topojson If topojson is installed correctly this will print out the directory where it's installed, which might look something like this (but could be different): /usr/local/bin/topojson If the command doesn't print

TopoJSON with strange paths

由 拥有回忆 提交于 2019-12-01 10:57:00
问题 I have an ESRI shapefile in WGS84 and convert it to another with a European Albers projection (EPSG:102013) with ogr2ogr . ogr2ogr -f 'ESRI Shapefile' -t_srs 'EPSG:102013' europe.shp europe_data_wgs84.shp I then convert it to TopoJSON using the following: topojson --id-property iso_a3 -o europe.json -p --simplify-proportion 0.25 --width 900 --height 600 -- countries=europe.shp I then load europe.json via D3 and can successfully display it (by setting the projection to null as it is already

Topojson: list of differences between v0 and v1?

由 穿精又带淫゛_ 提交于 2019-12-01 06:00:06
问题 I'am merging code, the code relying on v0 breaks on v1. What are the syntaxes changes between topojson.v0.min.js and topojson.v1.min.js?* -- List of suspect syntaxes: V0 > V1 .object > .feature .geometries > .features (in some cases or always?) *.coordinates > *.geometry.coordinates others ? 回答1: The 1.0.0 major release (see release notes) replaced the topojson.object function with topojson.feature for better GeoJSON compatibility. In previous versions of TopoJSON, topojson.object returned a

Making a SVG path like a smooth line instead of being ragged

由 天大地大妈咪最大 提交于 2019-12-01 04:04:48
Well in my project I create river lines from pathes . And due to my kind of big stroke-width it is very ragged : I already searched around. But the only thing I found was stroke-linejoin: round; . As you can see here: it is way better but I'm still not satisfied. Is there any way to get a really smooth line. Or let's say too have a even "rounder" linejoin ? Hugolpz An interesting direction is to leverage d3.svg.line to generate paths from the coordinates of your geoJSON feature, at which point you would be able to use D3's interpolate methods. See D3js-Topojson : how to move from pixelized to

D3js cartography: auto-focus on geographic area ? (svg canvas, zoom scale, coordinate translation)

由 北城余情 提交于 2019-12-01 01:12:34
I processed SRTM raster data to generate shapefiles -> geojson -> topojson so I may feed D3js with a suitable format. The result look like this (the blue area is my oversized svg canvas): Given geographic area of interest geo-borders (west border, North, East, South) and center : // India geo-frame borders in decimal ⁰ var WNES = { "W": 67.0, "N":37.5, "E": 99.0, "S": 5.0 }; // India geo-center : var latCenter = (WNES.S + WNES.N)/2, lonCenter = (WNES.W + WNES.E)/2; // HTML expected frame dimensions var width = 713, height = 724; // Projection: projection, center coord, scale(?), translate: var
订阅 topojson