score:1
i managed to solve the problem and it was easier than i thought. the solution was to first calculate the bounding area of china then to draw the map there. here are some code:
var projectionchina = d3.geomercator();
var pathchina = d3.geopath(projection);
g.append("g")
.attr("class", "china")
.attr("width", boundingarea.width)
.attr("height", boundingarea.height)
.selectall("path")
.data(data.geometries)
.enter().append("path")
.attr("d", pathchina);
where boundingarea
is the rectangle that encapsulates the chinese border.
hope this helps some one with the same problem.
Source: stackoverflow.com
Related Query
- Using data from two separate geoJSON files in D3.js map visualization
- Create map that combines data from two files with common column - but data doesn't match one to one
- Importing data from two csv files using d3js
- D3.js Plotting Multiple Data Sets from Separate Files
- Can d3.js draw two scatterplots on the same graph using data from the same source?
- reading nodes and edges from two distinct csv files using Force Layout
- Two bar charts from same data object using D3.js
- How do I Bind Data from a .tsv to an SVG's paths using d3.js for a Choropleth Map
- d3 line and points on map from geojson or csv data
- Using d3 to map geojson distribution data with projections
- D3.js using data from csv file to populate svg map
- Project data from a single geojson when multiple geojson files are present
- Filtering GeoJSON data using array of values to create Leaflet map
- Importing data from multiple csv files in D3
- Importing data from .csv using d3.js
- Displaying map using d3.js and geojson
- Loading local data for visualization using D3.js
- Getting data for d3 from ArangoDB using AQL (or arangojs)
- Get data from rest service using D3
- Making a graph inside a leaflet popup using geoJson data
- How to update elements of an HTML that the elements are created using data from a CSV file?
- D3 - Large GeoJSON File does not show draw map properly using projections
- Separate data from datahash
- d3.js: Drawing arcs between two points on map from file
- Drawing map with d3js from openstreetmap geojson
- D3.js: Set fitExtent or fitSize (or center and scale programmatically) for map with multiple geoJSON files
- Create data visualizations using Express and get data from a PostgreSQL database
- D3 linegraph using JSON data from API
- Constructing multiple bar chart by using only two columns from .csv file
- display data from csv file into BarGraph using d3.js
More Query from same tag
- Use superscript in d3
- parseDate for Wireshark extract to use to plot receive window
- d3 xScale is writing out NaN for values in line chart
- DC.js - Composite charts - Access the stack number inside renderlet and issue with gridlines
- Embeding Quick Animation/SWF in an SVG element
- D3 - Chart with positive and negative values
- Dynamically resize the d3 tree layout based on number of childnodes
- How to remove some nodes of the mobile patent suits in D3.js
- nvd3 multiBarChart - d3.scale.log
- Drag not working correctly after node transition, D3
- Resize function for responsive d3
- Log scale on D3.js
- d3.js - throttle events on hover?
- D3: How to add an extra column to the table which is not in csv columns
- Media query in d3.js only partially successful
- Unable to add text to circles in d3
- D3 Canvas globe with animated text
- Using Javascript function with WT(Witty).
- D3 - Large GeoJSON File does not show draw map properly using projections
- Create multiple elements from object-as-data
- topoJSON on D3: map doesn't show (but it works on www.mapshaper.org)
- d3.js: how to join data from more sources
- Show the tooltip inside a div in a D3 stacked area chart
- D3.queue -- understanding program flow
- Rendering issue in d3.js bar graph
- D3.js Select new JSON, lose image order and mouseover
- Custom Wicket (Ajax) Control with complex data model
- D3 data join() calls enter instead of update
- I can't get d3 transition to work with requestAnimationFrame
- d3js bar chart with brush slider