Javascript 如何使用d3在放大的画布上缩放/平移？

我使用d3进行画布缩放/平移，效果很好。
但我的问题来了。我需要放大里面的图像 画布。
由于图像太小，无法在不更改画布实际宽度和高度的情况下将其放入父div中，因此我将

canvas.style.width

设置为90%，以便画布填充父div的90%。
但是当进行缩放时，缩放不正常。您能告诉我如何解决此问题吗？

在画布样式上设置90%宽度后，d3侧应设置什么？

var-imgCanvas=document.getElementById（“canvas”）；
var imgCtx=imgCanvas.getContext（'2d'）；
var d3Zoom=d3.zoom（）.scaleExtent（[1,3]）。打开（“zoom”，zoom），
d3Canvas=d3.select（“canvas”）.call（d3Zoom）.on（“dblclick.zoom”，null），
d3Ctx=d3Canvas.node（）.getContext（“2d”），
d3width=d3Canvas.property（“宽度”），
d3height=d3Canvas.property（“高度”）；
var img=新图像（）；
函数zoom（）{
var transform=d3.event.transform；
d3Ctx.save（）；
imgCtx.clearRect（0,0，imgCanvas.width，imgCanvas.height），
d3Ctx.clearRect（0，0，d3width，d3height）；
d3Ctx.translate（transform.x，transform.y）；
d3Ctx.scale（transform.k，transform.k）；
d3Ctx.beginPath（）；
d3Ctx.drawImage（img，0，0）；
d3Ctx.fill（）；
d3Ctx.restore（）；
}
window.onload=function（）{
img.src=
"https://www.bullionstar.com/files/"
+“gold coins/100_100_gold-coin-canada-maple-leaf-2017-1oz-back.jpg”；
img.onload=函数（）{
imgCanvas.height=img.naturalHeight；
imgCanvas.width=img.naturalWidth；
imgCtx.drawImage（img，0，0，imgCanvas.width，imgCanvas.height）；
imgCanvas.style.height=“90%”；
}
};
您的意思是设置画布高度不起作用吗

首先，div没有宽度/高度属性（改为通过style/css设置）

其次，您应该将xform更改为

d3Ctx.scale( imgCanvas.width/imgCanvas.clientWidth,imgCanvas.height/imgCanvas.clientHeight);
d3Ctx.translate(transform.x, transform.y);
d3Ctx.scale(transform.k, transform.k);
d3Ctx.scale( imgCanvas.clientWidth/imgCanvas.width, imgCanvas.clientHeight/imgCanvas.height);

其中两个缩放（一个与另一个相反）将缩放变换映射到客户端画布坐标