[Solved]-How to get map to show longitude and latitude accurately with d3-d3.js

While scales may seem to be an appropriate method for plotting geographic points: don't use this approach.

You lose control over rotation of a projection and you cannot use a non cylindrical projection (only unrotated cylindrical projections can plot lat and long independently). But it also makes it very hard to align features positioned by scales with other map elements if they don't use the same approach.

Instead, D3 has a wide range of built in projections.

The projections take a [longitude,latitude] pair and return a [x,y] coordinate. Latitudes and longitudes must be in degrees, x and y are in pixels.

To create a projection you can use:

var projection = d3.geoMercator() // or geoAlbers, geoSupportedProjection, etc.

To use it, just pass it a coordinate:

projection([long,lat]) // [x,y]

In your case this might look like (for the cx, cy looks similar)

 .attr("cx", function(d) { return projection([d.long,d.lat])[0] })

Now this projection is centered at 0,0 degrees by default and set up for a 960x500 pixel map. But you can modify scale, center and rotation, for example:

var projection = d3.geoMercator().center([-100,35]).scale(1000)

For a more complete run down of projection methods you should look at the documentation for d3-geo.

In your case there is a special composite projection that covers the US, d3.geoAlbersUsa, which has room for Hawaii and Alaska. But, because of its composite nature is less flexible, though you can still scale it. The default scale anticipates 960x600 pixel map (setting larger map scales spreads the map over a larger area).