score:0
the issue is how you add the paths to the map:
// initial path creation:
var vector = map.append("path");
// adding data to the path once the data is loaded:
vector.data(topojson.feature(topo, topo.objects.foo).features);
// updating the path data when zoomed:
vector.attr("d", path);
the initial append, map.append("path")
, only creates one path element. once you load your data you bind data to the selection, vector.data(...)
. since your data is an array of several features, but your selection only holds one path element, you only update the one existing path with new data.
your selection vector
, however, now holds an enter selection: vector.enter()
, which contains a placeholder element for each item in the data array for which a path element does not already exist. these are never appended and consequently are never drawn or updated. instead, you need to use the d3 enter/update/exit cycle correctly, the easiest way here would be to use something like:
var vector = map.selectall("path") // select all paths assuming all paths are to be features. this can be selectall(null) too - we want an empty selection so that all features are entered.
.data(features) // bind data to them
.enter() // get the enter selection (placeholders for new elements that must be added so that an element exists for each item in the data array).
.append("path"); // append new paths and return them in a new selection.
then we can update on zoom the same as before.
http://bl.ocks.org/andrew-reid/e3f242b645f167cb17d470246764ef4d
Source: stackoverflow.com
Related Query
- Display geojson on a map using d3.js and d3-tile
- Displaying map using d3.js and geojson
- Venue/Indoor Map using D3.js and Geojson
- How to display each state name in d3 india map using GeoJSON
- Displaying some text on States on Map using D3.js and GeoJson
- Setting a small image on map on some coordinates using D3.js and GeoJson
- D3 map should read second external json data using queue and display on Hover
- Properly display bin width in barChart using dc.js and crossfilter.js
- Zooming and Panning a Mercator Map centered on the Pacific using d3.js
- How to divide a map into zipcodes using d3, javascript, and a json file?
- D3 - Large GeoJSON File does not show draw map properly using projections
- D3.js: Set fitExtent or fitSize (or center and scale programmatically) for map with multiple geoJSON files
- How to drag and rotate orthographic map (globe) using d3.js
- Plotting Name of States on Map using Node js and D3 in real time
- Display text and direct via hyperlink on d3 Map
- How to update/overwrite map and legend content using d3
- How to migrate map from tile size 256 to 512 in d3-geo-tile and ArcGIS
- Using d3 in meteor on windows 8.1, how can I display a world map, zoomed in on the US, with country borders and US state borders?
- How can I scale my map to fit my svg size with d3 and geojson path data
- Draw USA map region wise using D3 and angular 6
- Plot network of nodes and edges on map using D3.js
- Draw svg points from geoJSON query and image using d3 library
- Creating map of Africa using d3.js and topoJSON
- How to parse an array of objects using data method of d3js and display it in tool tip?
- d3 line and points on map from geojson or csv data
- Using data from two separate geoJSON files in D3.js map visualization
- Converting shapefiles and geoJson to TopoJson and/or using geo2topo
- Combine geojson and csv, then use new data to style the map
- how to get data from mongodb and display as a d3 chart using nodejs
- Color map using list and if/else in d3
More Query from same tag
- How are client-side libraries used in node.js?
- D3.JS - Different axes for different domains for small multiples
- d3js large force-directed graph server side simulation
- D3 graph with single Y value over time
- SVG tag mousedown event with D3
- Drawing arrows using d3
- why d3 line chart and bar chart display in same morment?
- dc js - data table to show pivot like data
- Best Practices for reading csv data with d3 in node. Why gettting a TypeError?
- Filling and Styling D3 Tree nodes based off of data
- Why is my scope lost in $http function on angularjs and d3js?
- How can I get d3 to display my text labels?
- NVD3 Round Border on Tooltips
- Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN"
- How to add foreignObject to a d3 circle?
- Making bar widths and gaps consistent in dc.js when using a large dataset and d3.scale.linear()
- How to get all d3.js charts on one page
- how to set button and rect for particular columns in table using d3?
- d3 - zoom to bounding box of SVG map element by clicking on a table row
- searching a d3 tree - reset after search
- How to display data when using Rickshaw.Graph.Ajax
- C3.js - Show/hide points independently for a data series
- Understanding D3 TopoJSON transformations
- How to remove white line in d3.js legnd
- D3: update data with multiple elements in a group
- Does d3.js force layout allow dynamic linkDistance?
- why the last tick doesn't have values - D3.js
- using array like object (Node List) with in SVG element - d3 Java Script
- Passing Data to D3 from Angular directive
- parsing .dot file to .json