我在角度项目中使用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就像我一样。有什么想法吗?
答案 0 :(得分:0)
经过更多的研究后,我写了这段代码:
$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会创建一个选择。如果有人知道为什么它不起作用,请解释一下。