Need to scale already projected data using d3 geoPath.projection(null)

问题

Based on d3 (ver 1.4) documentation https://github.com/d3/d3-geo/blob/master/README.md#geoProjection , the d3 projection should be set to null to use the data's raw coordinates. How do I scale if the projection looks correct using null? Here is the code:

var path = d3.geoPath()
    .projection(null)
    .context(context);

bands.features.forEach(function(d, i) {
  context.beginPath();
  context.fillStyle = colors[i];
  context.globalAlpha = .5;
  path(d);
  context.fill();
});

I have tried defining my own projection but the projection looks incorrect. Here is the code

var project = d3.geoProjection(function(x,y){
    return [x,y]
});

var path = d3.geoPath()
    .projection(project)
    .context(context);

回答1:

I would take a look at d3.geoTransform which should be better suited for showing already projected Cartesian data than d3.projection. From Mike Bostock:

But what if your geometry is already planar? That is, what if you just want to take projected geometry, but still translate or scale it to fit the viewport?

You can implement a custom geometry transform to gain complete control over the projection process.

To see a better example than what I can do here (and to read the rest of the quote), see this Bl.ock

For example, for your case you might use something like:

    function scale (scaleFactor) {
        return d3.geoTransform({
            point: function(x, y) {
                this.stream.point(x * scaleFactor, y  * scaleFactor);
            }
        });
    }

    path = d3.geoPath().projection(scale(2));

As for why the custom projection shown

var project = d3.geoProjection(function(x,y){
return [x,y] });

changes/distorts the projection, I do not know (I had similar results testing this answer), but if this projection's output is useable, it can be scaled fairly easily:

var project = d3.geoProjection(function(x,y){
return [x,y] }).scale(1000);

回答2:

Thanks for your suggestion. My problem turned out to not be a scale problem but a matrix transformation issue. I am using the d3marchingsquares.isobands software and I needed to transpose my data prior to sending it into marching squares.

My project is create a map similar to https://earth.nullschool.net/ but using Google Maps.

I am adapting Roger Veciana's "Isobands from a geotiff with d3" demo http://bl.ocks.org/rveciana/de0bd586eafd7fcdfe29227ccbdcd511. This is almost complete but having issues resizing the canvas layer. Next I am going to overlay Danny Cochran's windable canvas layer over the temperature contours. I updated Danny Cochran's code to work with the latest Google Map's version.

来源：https://stackoverflow.com/questions/41229756/need-to-scale-already-projected-data-using-d3-geopath-projectionnull

标签

javascript

d3.js

html5-canvas