d3.js - 使带有图例的地图适合在调整窗口大小时改变大小的容器

Question

这是我当前的代码，它具有预定义的所有参数（即具有固定大小）

代码+演示：

https://plnkr.co/edit/AzflYyovnJ6YwE5I?preview

但问题是容器会响应我希望（地图+图例）适合它。(map+legend) 应该能够根据容器调整自己。

我的部分代码来自当前代码：

var map = d3.select("#chart")

const width = w;//map1.node().getBoundingClientRect().width;
const height = h;//width / 2;

const zoom = d3.zoom()
.scaleExtent([1, 40])
// .translateExtent([[0,0], [width, height]])
.extent([[0, 0], [width, height]])
.on("zoom", zoomed);

const svg = map.append("svg:svg")
.attr("width", width)
.attr("height", height)
.call(zoom);

const india = svg.append("g").attr("id", "india");

我从网上得到的解决方案中尝试了一些东西。但这对我没有用。

这是我失败的尝试：https ://plnkr.co/edit/KKiTe9exaBW8B9gP

编辑：

终于可以做到了，但是有问题。在调整大小时，我的地图消失了。

http://plnkr.co/edit/MjynaqFnE7qpad6G?preview

编辑2：

终于发现错误：这个来自SizeChange函数的代码是所有的根源。我需要进行转换，使其位于中心我不知道该怎么做？

d3.select("g").attr("transform", "scale("+$("#chart").width() + $("#chart").height() + ")");

标签： d3.js