Javascript d3：组合画布+；视网膜用svg

这个问题对于在视网膜画布（目标平台）上使用D3是特别的。我使用画布创建了一个图表。我使用svg为图表创建了轴。我在svg矩形上调用d3 zoom函数，因为我试图找到解决视网膜画布上d3缩放问题的方法：

以下是我目前的结果：

---

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

您应该使用宽度和高度，而不是范围的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值与width和height值交换，因为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();
}

函数绘图（）{
context.save（）；
背景。量表（2,2）；
clearRect（0，0，宽度，高度）；
//剪辑路径
context.beginPath（）
rect（0，0，宽度，高度）；
clip（）；
对于（i=0；i