The problem is that you are not fitting the projection to anything with
fitSize takes two parameters, an array with width and height and a geojson feature:
projection.fitSize([width,height],geojson). You meed to specify what geojson feature (or feature collextion) should be fit to your specified dimensions. This method sets the scale and translate, so without a feature, these will not be set and your projection will return NaN values.
As your geojson is not loaded until your d3.json callback is triggered, this method must be invoked within the callback. Also note that the method needs a feature or feature collection, not an array of features (data, not data.features in your case):
- Getting NaN values in svg path 'd' attr when trying to map geojson data
- How can I scale my map to fit my svg size with d3 and geojson path data
- Pass null values to SVG path (using d3.js) to suppress missing data
- Have gaps in a SVG path when there is no data
- Why am I getting an array of NANs when trying to plot a map with D3.js?
- Getting TypeError when trying to sort data within a d3.csv().then() Promise object using a function outside of the then() method
- Filtering GeoJSON data using array of values to create Leaflet map
- mouseout/mouseleave gets fired when mouse moves INSIDE the svg path element
- D3 - How to update force simulation when data values change
- SVG circles don't get repositioned when zooming leaflet map
- Trying to add ID to svg path from json file
- D3: "SVG4601: SVG Path data has incorrect format and could not be completely parsed."
- Geojson map with D3 only rendering a single path in a feature collection
- How to get projected path definition strings (not SVG elements) from a GeoJSON dataset with D3?
- How do I get the d3 svg points to stay in their correct position on the leaflet map when zooming?
- d3: Refreshing the attr value on a subnode when data changes
- Iterate over geojson in D3.js and return values when condition is met
- Trying to draw SVG to canvas, why is my SVG XML getting truncated?
- How to get SVG path data of TopoJSON feature without adding it to the DOM?
- I am trying to use multiple 2 arrays for binding data for svg circles but cannot figure out how
- Adding a new path when the updated data has additional sections
- Transition for grouped bar chart in d3 when updating the data values
- Losing Data Binding When Creating Path
- d3js timeseries - svg path has huge values
- Trying To Plot Json Data On World Map Using leafletjs But Data Displayed is Not Accurate
- How to rearrange the DOM order of svg elements based on their data values in a dynamically changing d3 vis?
- d3 line and points on map from geojson or csv data
- Using data from two separate geoJSON files in D3.js map visualization
- Combine geojson and csv, then use new data to style the map
More Query from same tag
- this.setState() is not re-rendering
- Introducing Arrow(directed), in Force Directed Graph d3
- d3js scatterplot custom icons and animation
- D3 Collapsible force directed graph with non-tree data - link alignment
- HTML SVG: show element on top of all elements
- How to load txt files into D3.JS
- How to animate line graph in D3
- d3.js changing data on click (multiple instances of Donut Chart )
- How to Place labels and give color range by number
- bootstrap dropdown doesn't work inside svg?
- Working with mutation in Clojurescript
- Creating Tool Tips Correctly Based on Individual Sums
- Reverse Axis in rCharts Without Sacrificing Animation?
- Regarding D3 stacked bar chart structure
- D3.js change background opacity with transition
- D3.js v4.0.0-alpha.35 Transitions not working
- How do I split the y-axis of the graph using d3.axis.tickFormat?
- d3.js zooming only works when cursor over pixels of graph
- dc.js : how to change circle color on mouseover
- Implement a D3 chart (sankey) with Angular
- Embedded svg isn't scaled correctly
- How to call a `callback` function after all `transition` done?
- installing d3 using npm causes contextify errors
- Read formatted data with d3.dsv.parseRows
- Updating the coordinates in d3js for a tree layout
- Fix YAxis Range in Parcoord.js for all the parallel coordinates
- Where to d3 sort this data for sankey / different browsers
- Obtaining totals from properties of parallel arrays in nested objects
- Delay animated arcs with .attrTween method
- d3.js - adding zoom and pan prevents dragging nodes