score:19
Accepted answer
You need to separate out the projection so you can use it again to project the lat/lon of your point:
var map = svg.append("g").attr("class", "map");
var projection = d3.geo.albers()
.origin([3.4,46.8])
.scale(12000)
.translate([590, 570]);
var path = d3.geo.path().projection(projection);
d3.json('myjsonfile.json', function(json) {
map.selectAll('path')
.data(json.features)
.enter().append('path').attr('d', path);
// now use the projection to project your coords
var coordinates = projection([mylon, mylat]);
map.append('svg:circle')
.attr('cx', coordinates[0])
.attr('cy', coordinates[1])
.attr('r', 5);
});
Another way to do this is just to translate the dot by the projected coords:
map.append('svg:circle')
.attr("transform", function(d) {
return "translate(" + projection(d.coordinates) + ")";
})
.attr('r', 5);
Source: stackoverflow.com
Related Query
- d3 add text to circle
- d3.js Add a circle in d3.geo.path
- Add image inside a circle D3
- Add region around SVG path for mouseover
- Trying to add ID to svg path from json file
- d3: How to add border to a circle on an if-condition?
- Find centroid of topoJSON path and use it to position a circle in D3
- moving a circle along a d3 path animating at varying speeds
- Add borders to SVG path d3 javascript
- How to add some padding between a path and text on it?
- Add new path to an existing map in D3
- d3.js add a label in the center of a path
- add circle in a spiral chart with d3js with line connecting to center
- How to add circles onto line chart path d3.js
- How to fix unwanted circle on / break down of SVG path element for Sankey links with d3?
- d3.js geo - rendering svg path
- Draw a path from an origin point to the outside radius of a circle
- How to calculate a modified Path for different size circle in Force directed arrow graph?
- d3js Box and Whisker plot: add a single circle to plot given a point in the distribution
- How to add circle points for multiline chart?
- How to add filter to create single path from one bar to another bar (not in a loop)
- D3 add stroke to the side of a path only
- D3js path : add a sensibility zone
- Add a smiley face to a SVG circle
- D3 changes from Version 3.0 to make a circle path of points
- How to add text to svg circle in d3
- How to add curved edge to d3 path lines?
- Add a Circle for Every nth Data Element d3.js
- How to add circle with an on-hover text box to d3.js mulitline chart?
- Clip path for animated line and circle in d3 js
More Query from same tag
- How to plot graphs using networkx and d3py
- Change color of node groups in a d3.js force node canvas layout
- D3.js Force Layout Graph blank space with external data
- Drawing non-continuous lines with d3
- How to change the Speed of a force-directed graph in d3.js?
- Update d3 graph with new data
- Trouble Installing d3 Typings for Power BI Custom Visual Development
- Using D3 axis functionality on a canvas
- D3 graph circle packing graph coloring
- Static D3 Force-Directed Graph performance
- d3js filtering out the old data
- Why is that d3.js pie chart transition not working?
- To show all content, svg needs 9000px - Is there a method to force a line break?
- How to apply a tween function on letters instead of numbers?
- D3 force layout: rotating text
- d3.js firefox mouse events perormance
- Adding some content to a <text> tag through JS
- Declaring CSS style inside Javascript for D3 graph
- d3 x scale and labels at the bottom
- How to Draw rectangles at 0,45,90,135,180 degree so on around an SVG Circle with D3.js
- d3js bar chart issue when used with jquery mobile
- adding mouseover event to d3.js bar chart
- d3js bars not updating properly
- Ordering large time series datasets in BigQuery for export
- Why are the labels on my D3 axis inconsistent (e.g. month, day)?
- Javascript issue with rendering updated chart in D3
- Add labels to nodes in Hobbelt's "Group/Bundle Nodes" D3 force layout example?
- D3 equivalent of jQuery's child selector?
- How to enable dragging for D3 elements overlaid on a leaflet map
- Setting Max Length of Links in D3 Tree Layout