score:5
Problem
All your features are drawing, you are correctly using your path and enter cycle. To see, set your fill to none:
You can see them when inspecting the svg: all the paths are there.
Why don't you see them in the map when they have fill? Because the the polygons are inverted, they cover the entire world except for the region of interest. While most other geographic libraries/renderers treat geojson as Cartesian, D3 does not. This means winding order matters. Your coordinates are wound in the wrong order.
Solution
To properly fill, draw all features, and support mouse interaction, you'll need to reverse the winding order of the polygons. You can do this on the fly, or create new geojson files to store the pre-reversed data.
To do so let's take a look at your data. You are working with only features that are MultiPolygons, let's look at the structure:
{
type:"Feature",
properties: {...},
geometry: {
type: "MultiPolygon",
coordinate: /* coordinates here */
}
}
Coordinates are structured as so:
coordinates:[polygons] // an array of polygons
The individual polygons are structured as so:
[outer ring][inner ring][inner ring]... // an array of coordinates for an outer ring, an array of coordinates for each hole (inner ring).
Polygon rings are structured as an array of long lats, with the first and last values being the same.
[x,y],[x,y]....
So, to reverse the ordering of the coordinates, we need to reverse the items in the ring arrays:
features.forEach(function(feature) {
if(feature.geometry.type == "MultiPolygon") {
feature.geometry.coordinates.forEach(function(polygon) {
polygon.forEach(function(ring) {
ring.reverse();
})
})
}
})
If we had polygons in the mix too (they are slightly less nested), we could use:
features.forEach(function(feature) {
if(feature.geometry.type == "MultiPolygon") {
feature.geometry.coordinates.forEach(function(polygon) {
polygon.forEach(function(ring) {
ring.reverse();
})
})
}
else if (feature.geometry.type == "Polygon") {
feature.geometry.coordinates.forEach(function(ring) {
ring.reverse();
})
}
})
Here's an updated plunker
score:1
It is drawing all the paths. See the DOM for the SVG in a web page inspector to confirm. However, you are seeing only the top one which happens to be the larger area because of fills. Try adding .style('fill', 'none')
to the paths addition in JS. or the following in CSS
path {
fill: none
}
score:1
If someone will see a similar problem, I created a tool which will help you to rewind
or reverse
geojson
https://observablehq.com/@bumbeishvili/rewind-geojson
You can run it as a snippet just bellow
<div class="notebook-content">
</div>
<script type="module">
import notebook from "https://api.observablehq.com/@bumbeishvili/rewind-geojson.js"; // "download code" url
document.querySelector('.notebook-content').innerHTML =notebook.modules[0].variables
.filter(d=>d)
.map((d,i)=>` <div class=" observable-wrapper div-number-${i}"></div>`)
.join('')
.concat('<div style="display:none" class="hidden"></div>')
import {Inspector, Runtime} from "https://unpkg.com/@observablehq/runtime@3/dist/runtime.js";
let i=1;
Runtime.load(notebook, (variable) => {
if(i==4 ){i++; return new Inspector(document.querySelector(`.hidden`));}
if(i==13)return;
return new Inspector(document.querySelector(`.observable-wrapper:nth-child(${i++})`));
});
</script>
Source: stackoverflow.com
Related Query
- Geojson map with D3 only rendering a single path in a feature collection
- Display only a single state with counties from a full US counties map
- How can I scale my map to fit my svg size with d3 and geojson path data
- Resize projection in d3JS in only one axis with a geojson map
- Map created from geojson file just fills the entire canvas with the color of the path fill
- Rendering only a portion of a topojson map using D3.js
- Drawing map with d3js from openstreetmap geojson
- D3.js: Set fitExtent or fitSize (or center and scale programmatically) for map with multiple geoJSON files
- How to get projected path definition strings (not SVG elements) from a GeoJSON dataset with D3?
- Rendering a map on ie8 with D3
- d3js v5 + Topojson v3 Map with border rendering
- Getting NaN values in svg path 'd' attr when trying to map geojson data
- In D3 how do you add labels to features in geojson feature collection
- Bangalore geojson map with d3 js
- Why is this geojson not rendering with D3?
- D3 with Topojson only renders parts of the map
- D3 GeoJSON only render partial map in rectangle
- Using d3 to map geojson distribution data with projections
- d3.path plots only first feature of feature collection
- D3 mapping with geoJson US Map working but not World
- Collapsible tidy horizontal tree from obervablehq migrated to html is rendering only a single large node in the middle
- d3js world map with geoJSon
- d3.js Map not rendering on Internet Explorer or Firefox, Only Chrome
- D3js draws only one feature within geoJSON FeatureCollection
- Center a map in d3 given a geoJSON object
- d3.js Map (<svg>) Auto Fit into Parent Container and Resize with Window
- Calculate SVG Path Centroid with D3.js
- How to select a d3 svg path with a particular ID
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- How to update an svg path with d3.js
More Query from same tag
- SVG textpath click radius too high when font-size below 1px
- mouseover not working as an arrow function?
- How to set xaxis lables in d3js?
- Strange behavior of Bootstrap Accordion Expand Height with D3 Graph
- d3.js sorting by rollup field
- The axis label at x=0 does not show up
- d3 multi line with mouse over cursor for both y AND x value
- How to use JSON properties as axis tick values in D3
- Disable/Enable Buttons when clicked
- D3 Chart Issue, Data Binding Not Working
- D3js: How do I clear the zoom scale set by the d3.zoom event?
- Ordering large time series datasets in BigQuery for export
- Is there any possibility of using imported fonts with r2d3?
- Right Axis not displaying on Dual Axis Grouped Bar and Line Chart D3
- d3 autospace overlapping tick labels
- D3 scatter plot not showing
- d3 redraw bar chart with new values
- D3js - Getting a line chart drawn, from "JSON data" input using d3.json
- How to pass object to d3-context-menu dynamic-menu-list
- "Tick is not defined" error on Firefox, using d3
- d3 force directed layout - drawing links without changing the location of the nodes
- d3 why on mousehover field is undefined and d3.event is undefined too?
- Pagination of legends
- "Exporting" a Tributary example that makes use of the tributary object - d3.js
- D3 mousedown event deleting the wrong node
- Nested jQuery Accordions using d3
- Issue trying to build error chart in D3
- nvd3, lineWithFocusChart y-axis ticks are missing
- d3js force layout dynamically adding image or circle for each node
- D3.js - Appending to <div> not working