キャンバスにd3.jsマップをレンダリングする方法

Question

可能であれば、地図をぼかすことなくd3.js郡マップをレンダリングできませんでした。

私は通常のトリックを使用しています：私のcanvasスタイルの幅は私の属性の幅の半分です。私は図面の文脈を半画素単位で翻訳して、望ましくない影響を相殺します。

しかし、それはまだ非常にぼやけています。

誰かがcanvas要素のために作られた鮮明なd3.jsマップのパターンを共有することはできますか？

function drawQuintiles() { 
    var width = 960, 
    height = 500; 

    var projection = d3.geo.albers() 
     .scale(666); 


    var canvas = d3.select("#quintiles") 
      .append("canvas") 
      .attr("class",'canvasarea'); 
    var context = canvas.node().getContext("2d"); 

    var ratio = (window.devicePixelRatio/context.webkitBackingStorePixelRatio) || 1; 

    d3.select('.canvasarea') 
       .attr("width", width * ratio).attr("height", height * ratio) 
       .style("width", width + "px").style("height", height + "px"); 


    context.scale(ratio, ratio); 

    var path = d3.geo.path() 
     .projection(projection) 
     .context(context); 

    d3.json("/data/us-counties.json", function(error, us) { 
    if (error) throw error; 

    context.strokeStyle = '#333'; 

    context.beginPath(); 

    var strokeWidth = 0.5; 

    var iTranslate = (strokeWidth % 2)/2; 
    context.translate(iTranslate, 0); 

    context.lineWidth = strokeWidth; 
    context.lineCap = "round"; 

    path(topojson.feature(us, us.objects.counties)); 
    context.stroke(); 
    }); 
} 

Answer 1

これは私が終了したコードです。縮尺と平行移動ハックを削除するとマップのレンダリングが適切に行われます。

function drawQuintiles() { 
    var width = 1600; 

    d3.json("/data/us-counties.json", function(error, data) { 

    var projection = d3.geo.albersUsa(); 

    var path = d3.geo.path().projection(projection); 

    var tracts = topojson.feature(data, data.objects.counties); 

    projection.scale(1).translate([0, 0]); 

    var b = path.bounds(tracts); 

    var whRatio = ((b[1][0] - b[0][0])/(b[1][1] - b[0][1])); 

    var height = (width/2) * whRatio; 


    var s = .98/Math.max((b[1][0] - b[0][0])/width, (b[1][1] - b[0][1])/height), 
     t = [(width - s * (b[1][0] + b[0][0]))/2, (height - s * (b[1][1] + b[0][1]))/2]; 

    projection.scale(s).translate(t); 


    var canvas = d3.select("#quintiles") 
      .append("canvas") 
       .attr("class",'canvasarea'); 
    var context = canvas.node().getContext("2d"); 


var ratio = window.devicePixelRatio || 1; 

d3.select('.canvasarea') 
       .attr("width", width).attr("height", height) 
       .style("width", ((width * ratio)) + "px").style("height", ((height * ratio)) + "px"); 


    var path = d3.geo.path() 
     .projection(projection) 
     .context(context); 


    if (error) throw error; 

    context.strokeStyle = '#333'; 

    context.beginPath(); 

    var strokeWidth = 0.5; 

    context.lineWidth = strokeWidth; 
    context.lineCap = "round"; 

    path(topojson.feature(data, data.objects.counties)); 
    context.stroke(); 
    }); 
} 

drawQuintiles();