Javascript dc.js响应地图和缩放功能（鼠标滚轮）

我已经分叉了示例dc.js（版本4）映射文件如下。我想要的是映射对引导容器做出响应。因此，如果屏幕大小改变，地图显示正确。SVG的响应方式是将宽度和高度设置为null，并使用CSS格式将宽度和高度设置为100%。但是，我发现底层的

（layer0）元素没有响应。因此，我尝试向投影添加比例元素。但不幸的是，我不知道如何使它像使用SVG元素一样灵活

此外，我想有放大的可能性。希望有人能帮我

<div class="container">
  <div class="row">
    <div class="col">
      <div id="world-map" class="responsive"></div>
    </div>
  </div>
</div>

<pre id="data">country  total
      Belgium   2   
      Germany   3   
      France    4   
</pre>

---

连接以更改父级

的属性以响应缩放事件非常容易

首先，退出投影初始化，因为我们稍后需要初始值：

  const scale0 = 100, x0 = 800 / 2, y0 = 400 / 2, 
    projection = d3.geoEquirectangular()
      .scale(scale0)
      .translate([x0, y0])
  worldMap
    .projection(projection)

然后在图表呈现后添加缩放处理程序：

  worldMap.on('postRender', chart => {
    const zoom = d3.zoom();
    zoom.on('zoom', () => {
      const {k, x, y} = d3.event.transform;
      chart.select('g.layer0')
        .attr('transform', `translate(${x},${y}) scale(${k})`)
    })
    chart.svg().call(zoom);
  });

每次接收到缩放事件时，我们都会从事件中提取比例、x和y偏移，并将它们应用于如下所示的变换

translate(-350.6778787924404,-173.42665430196223) scale(1.9132163161837539)

在我的第一次尝试中，我应用了一个新的投影并重新绘制了图表。这是可行的，但存在性能问题。改变变换是一条路要走

---

，具有平移和缩放功能。

这不是我最喜欢的解决方案，因为文本可能会失真，但您尝试过吗？否则，有一种可能会有所帮助的方法。困难的部分是检测div何时改变了大小-遗憾的是，2020年还没有跨浏览器方法。嗨，Gordon，我找到了一个解决方案，通过在引导容器中设置一个变量innerWidth和innerHeight，使layer0响应，并用这些变量替换translate（800和400）。但是你也知道放大图表的解决方案吗？你是在问什么？是的，你知道如何将mouseZoomable应用到这张地图上吗？哦，我忘了这是geo choropleth。嗯，它不是内置的，可能没那么难，但我不确定在接下来的几天里我是否有时间。现在我看到你一次问了两个问题，很聪明。再次感谢戈登，我刚开始学习dc和d3，所以对我来说一切都是新的。我想知道你是否也有像最小值和最大值这样的东西，你可以在缩放上设置。现在你可以缩小到地图消失的程度；都是标准的D3。请看一下d3 zoom文档中的以下两个函数。我想这就是你要找的。

  worldMap.on('postRender', chart => {
    const zoom = d3.zoom();
    zoom.on('zoom', () => {
      const {k, x, y} = d3.event.transform;
      chart.select('g.layer0')
        .attr('transform', `translate(${x},${y}) scale(${k})`)
    })
    chart.svg().call(zoom);
  });

translate(-350.6778787924404,-173.42665430196223) scale(1.9132163161837539)