html - 如何在 Canvas 上渲染 d3.js map ，使其不模糊

Question

尽我所能，我无法在不导致 map 明显模糊的情况下渲染 d3.js 县 map 。

我正在使用常用的技巧:我的 canvas 样式宽度是我的属性宽度的一半。我将绘图的上下文平移半个像素以抵消任何不需要的效果。

但它仍然非常模糊。

有人可以分享为 canvas 元素制作的清晰 d3.js map 的模式吗？

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

这是我结束的代码。删除比例尺和翻译黑客可以正确渲染 map 。

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();