时间戳

首页 > 解决方案 > D3.js V4 Zoom 在 Angular 中不起作用

javascript - D3.js V4 Zoom 在 Angular 中不起作用

问题描述

我在我的 Angular 项目中使用 D3 v4 和 Datamaps。我试图使缩放工作，但我不知道有什么问题。

我有一个创建地图的函数：

public createChart() {
    this.geoChart = new Datamap({
      element: this.geolocationChart.nativeElement,
      scope: 'world',
      width: null,
      height: null,
      projection: 'mercator',
      responsive: true,
      geographyConfig: {
        hideAntarctica: true,
        borderWidth: 1,
        borderOpacity: 1,
        borderColor: '#ffffff',
        popupTemplate: function(geo, data) {
          return ['<div class="hoverinfo"><strong>', geo.properties.name, ': ' + data.countryData, '</strong></div>'].join('');
        },
        popupOnHover: true,
        highlightOnHover: true,
        highlightFillColor: '#ff4200',
        highlightBorderWidth: 2,
        highlightBorderOpacity: 1
      },
      fills: {
        defaultFill: '#f5f5f5',
        highlight: '#5005a0'
      },
      data: this.convertData(this.defaultCountryData),
      done: function(datamap) {
        datamap.svg.call(d3.zoom().on('zoom', redraw));
        function redraw() {
          datamap.svg.selectAll('g').attr('transform', d3.event.transform);
        }
      }
    });
}

我在 ngAfterContentInit 中触发它。

当我尝试使用鼠标滚轮缩放或拖动地图时，我在控制台中收到此错误消息：“无法读取属性 'button' of null”

我正在像这样导入 D3 和 Datamap：

import * as d3 from 'd3';
import Datamap from 'datamaps/dist/datamaps.world.min.js';

我真的不知道可能是什么问题。我看过其他帖子，每个人都提到要像我一样导入 D3。有任何想法吗？

标签： javascriptangulard3.js

解决方案

因此，经过更多研究，我编写了以下代码：

function(datamap) {
        d3.select('.datamap').call(
          d3
            .zoom()
            .scaleExtent([0.7, 6])
            .on('zoom', function() {
              datamap.svg.selectAll('g').attr('transform', d3.event.transform);
            })
        );
      }

它在图表加载后运行，幸运的是它可以工作。由于某种原因，当您在 datamap.svg 上调用 zoom() 函数时，它会导致错误，而 datamap.svg 和 d3.select('.datamap') 创建一个类似的数组，但 d3.select 创建一个选择。如果有人知道为什么它不能以其他方式工作，请解释一下。

推荐阅读