Question

我在角度项目中使用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中触发它。

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

我正在导入D3和Datamaps：

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

我真的很无能为力。我已经看到其他帖子和每个人都提到导入D3就像我一样。有什么想法吗？

Answer 1

经过更多的研究后，我写了这段代码：

$number = "878"; //the random number
$int = strlen($number);
$multiplier = 6 - $int;
if ($multiplier != 0) {
    $number = $number * pow(10 , $multiplier);
}

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

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

1 个答案: