d3：结合 canvas + svg 用于视网膜

Question

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

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

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

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

d3：结合 canvas + svg 用于视网膜

d3: combining canvas + svg for retina

javascript

canvas

d3.js

retina