d3：为视网膜结合画布+ svg答案

【问题标题】：d3: combining canvas + svg for retinad3：为视网膜结合画布+ svg
【发布时间】：2018-03-03 16:41:08
【问题描述】：

这个问题专门针对在目标平台视网膜画布上使用 D3。我有一个使用画布创建的图表。我使用 svg 为图表创建了轴。我在 svg 矩形上调用 d3 缩放功能，因为我试图在视网膜画布上找到 d3 缩放问题的解决方法：https://github.com/d3/d3-zoom/issues/133

这是我目前的结果：https://bl.ocks.org/interwebjill/cc5361ca1d1c5538fab19999785c6d01

我可以使用重叠的 svg 矩形捕获缩放事件。唯一需要做的调整是将画布的缩放中心重置为矩形的一半。但是 d3 v4 不再像 v3 那样具有 zoom.center()。

【问题讨论】：

标签： javascript d3.js canvas retina

【解决方案1】：

您应该使用宽度和高度来代替范围的 canvasWidth 和 canvasHeight 值：

var xSVG = d3.scaleTime()
    .range([0, width]);

var x = d3.scaleTime()
    .range([0, width]);

var x2 = d3.scaleTime()   // for zooming
    .range([0, width]);

var ySVG = d3.scaleLinear()
    .range([height, 0]);

var y = d3.scaleLinear()
    .range([height, 0]);

在绘制逻辑中，您可以添加一个 context.scale(2, 2) 来绘制两倍大的所有内容。再次，将所有 canvasWidth 和 canvasHeight 值与宽度和高度交换，因为 context.scale 将处理其余部分

function draw() {
  context.save();
  context.scale(2, 2);
  context.clearRect(0, 0, width, height);

   // clip path
   context.beginPath()
   context.rect(0, 0, width, height);
   context.clip();

   for (i=0; i<len; i++) {
     context.beginPath();
     area(sources[i].values);
     context.fillStyle = color(sources[i].id);
     context.fill();
   }

   context.restore();
}

【讨论】：