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

Posted 2021-03-28

这个问题特别适用于在视网膜画布上使用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（）。

答案

您应该使用宽度和高度而不是范围的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();
}