文章/答案/技术大牛

发布

社区首页 >问答首页 >D3.js V4缩放在Angular中不起作用

问D3.js V4缩放在Angular中不起作用
EN

Stack Overflow用户

提问于 2018-06-08 23:07:56

回答 1查看 983关注 0票数 0

我在我的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中触发它。

当我尝试使用鼠标滚轮缩放或拖动地图时，在控制台中收到以下错误消息："Cannot read property 'button‘of null“

我像这样导入D3和Datamaps：

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

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

javascript

angular

d3.js

回答 1

Stack Overflow用户

发布于 2018-06-11 22:17:56

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

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创建选择时，它会导致错误。如果有人知道为什么它不能以其他方式工作，请解释一下。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/50763551

复制

相似问题

问D3.js V4缩放在Angular中不起作用
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3.js V4缩放在Angular中不起作用EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问D3.js V4缩放在Angular中不起作用
EN