From 426f864db2ac206e58a1755e221f62fc47f5b129 Mon Sep 17 00:00:00 2001 From: SHAOJIAHAO <55341701@qq.com> Date: Fri, 3 Mar 2023 15:21:29 +0800 Subject: [PATCH] =?UTF-8?q?[=E5=AE=8C=E5=96=84]=E5=A4=A9=E5=9C=B0=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 - .../statistic-analysis/home/home.component.ts | 88 ++++--------------- 2 files changed, 19 insertions(+), 70 deletions(-) diff --git a/package.json b/package.json index 35c648c..8e91bea 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "@angular/compiler-cli": "~13.1.0", "@types/jasmine": "~3.10.0", "@types/node": "^12.11.1", - "d3": "^7.8.2", "html-docx-js-typescript": "^0.1.5", "jasmine-core": "~3.10.0", "karma": "~6.3.0", diff --git a/src/app/home/statistic-analysis/home/home.component.ts b/src/app/home/statistic-analysis/home/home.component.ts index 2986c39..3e26292 100644 --- a/src/app/home/statistic-analysis/home/home.component.ts +++ b/src/app/home/statistic-analysis/home/home.component.ts @@ -837,43 +837,25 @@ export class HomeComponent implements OnInit { countries = []; map; mapInit() { - const that = this; var T = window['T']; var d3 = window['d3']; + var countries = []; + var countriesOverlay = new T.D3Overlay(init, redraw); + this.map = new T.Map('mapbox'); - var countriesOverlay = new T.D3Overlay(this.init, this.redraw); - var countriesOverlay1 = new T.D3Overlay(this.init1, this.redraw1); this.map.centerAndZoom(new T.LngLat(117.03862, 36.664169), 9); + d3.json( 'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', - function (data) { - that.countries = data.features; - console.log(data); - - that.map.addOverLay(countriesOverlay); - countriesOverlay.bringToBack(); - that.map.addOverLay(countriesOverlay1); + (data) => { + countries = data.features; + this.map.addOverLay(countriesOverlay); countriesOverlay.bringToBack(); } ); - // console.log(countriesOverlay); - } - init(sel, transform) { - const that = this; - var d3 = window['d3']; - var countries; - new Promise((resolve, reject) => { - d3.json( - 'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', - function (data) { - that.countries = data.features; - resolve(data); - } - ); - }).then(() => { - console.log(countries); - var upd = sel.selectAll('path.geojson').data(this.countries); + function init(sel, transform) { + var upd = sel.selectAll('path.geojson').data(countries); upd .enter() .append('path') @@ -883,48 +865,16 @@ export class HomeComponent implements OnInit { return d3.hsl(Math.random() * 360, 0.9, 0.5); }) .attr('fill-opacity', '0.5'); - }); - } - redraw(sel, transform) { - console.log(transform); - - var d3 = window['d3']; - sel.selectAll('path.geojson').each(function (d, i) { - d3.select(this).attr('d', transform.pathFromGeojson); - // .on("mouseover",function(){ - // console.log('这是点击了',); - // }) - }); - } - init1(sel, transform) { - const that = this; - var d3 = window['d3']; - new Promise((resolve, reject) => { - d3.json( - 'https://geo.datav.aliyun.com/areas_v3/bound/370100_full.json', - function (data) { - that.countries = data.features; - resolve(data); - } - ); - }).then(() => { - var upd = sel.selectAll('path.geojson1').data(this.countries); - upd - .enter() - .append('path') - .attr('class', 'geojson1') - .attr('stroke', 'black') - .attr('fill', function (d, i) { - return d3.hsl(Math.random() * 360, 0.9, 0.5); - }) - .attr('fill-opacity', '0.5'); - }); - } - redraw1(sel, transform) { - var d3 = window['d3']; - sel.selectAll('path.geojson1').each(function (d, i) { - d3.select(this).attr('d', transform.pathFromGeojson); - }); + } + + function redraw(sel, transform) { + sel.selectAll('path.geojson').each(function (d, i) { + d3.select(this).attr('d', transform.pathFromGeojson); + // .on("mouseover",function(){ + // console.log('这是点击了',); + // }) + }); + } } formroute() {