disaster crawler
1.0.0
Поскольку правительство Тайваня размещает метеорологические и стихийные бедствия на каждой веб -странице в соответствии с месяцем/годом или типом стихийных бедствий, оно приводит к тому, что такая же катастрофа может возникнуть, и с 2014 по 2015 год может быть 24 страницы (один файл HTML в месяц), что очень неудобно для обработки. Поэтому мы используем API Kinomo для извлечения и фильтрации информации об этих страницах
И интегрируйтесь в тот же файл JSON
Но если вы не используете встроенную функцию интеграции API Kinomo, ваши источники AJAX будут очень преувеличены, и многие источники должны быть обработаны одновременно. Если пользователь выберет информацию о количестве осадков, он надеется увидеть информацию с 20xx до 2015 года. Таким образом, вам, вероятно, потребуется запустить 2015-20xx, чтобы умножить 12 Ajax. Это будет не только допустимая проблема, но и синтаксическая ошибка переменной неопределенной. Причина в том, что Ajax асинхронно, но компилятор JavaScript сначала запустит код. В настоящее время некоторые переменные изначально использовались для получения ответа Ajax, но, поскольку он не закончил работать, он еще не вернулся. В настоящее время переменная будет нулевой или неопределенной, и будут проблемы с последующей обработкой. В настоящее время вы должны использовать функции jQuery, когда () и затем (). Использование выглядит следующим образом:
function taipei_rain ( type , button ) {
var deferreds = [ ] ;
var taipei_dataset = [ ] ;
var data_url = [
{
'title' : '2002_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/b5pnx91i?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2003_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/9kj2hkik?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2004_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/59qturr2?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2005_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/dmuknjqm?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2006_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/8d5ddt9u?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2007_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/ciszlrhw?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2008_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/746pie88?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2009_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/8z3bx1nq?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2010_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/crjccgkc?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2011_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/afoernpw?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2012_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/7spnhan2?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2013_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/c2lpv54u?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2014_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/c8593u62?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
} , {
'title' : '2015_taipei_rain' ,
'url' : 'https://www.kimonolabs.com/api/26rh5uwq?apikey=x3C3wO491D2hBEkPXsPJ9CgRJXzlEN8V'
}
]
var deferreds = [ ] ;
$ . each ( data_url , function ( index , stat ) {
deferreds . push (
//跑迴圈將所有的Ajax response status 存入deferred陣列之中，並當作之後when() function的參數
$ . ajax ( {
type : 'GET' ,
dataType : 'jsonp' ,
url : this . url
} )
) ;
} ) ;
// 無法把一整個陣列作為參數，因此使用apply
$ . when . apply ( $ , deferreds ) . then ( function ( ) {
// 將儲存所有Ajax response的陣列deferreds放進when()當中，當所有的Ajax皆跑完的時候，他才會跑then()中的程式碼，有效避免AJax非同步的例外狀況
for ( var j = 0 ; j < arguments . length ; j ++ ) {
var title = arguments [ j ] [ 0 ] . name ;
var data = arguments [ j ] [ 0 ] . results . collection1 ;
// 接下來就可以做自己想要的data process Правительство выпустило три уровня информации на официальном сайте открытых данных:
-Борды административных округов графства (города)
-Административная граница поселка (город, город, район)
-Национальная карта границ деревни
Из -за систем, используемых в правительстве, выпущенные форматы являются форматами файлов SHP. Благодаря Майку, автору D3.JS, он недавно открыл новый проект «ShapeFile» на GitHub, позволяя нам читать файлы SHP и вывести их в формат Geojson; Фактически, Майк интегрировал Shapefile в другой проект «Topojson», позволяющий нам напрямую генерировать файлы Topojson из файлов SHP. (PS, если вам интересно, перейдите на этот сайт)
Поскольку Topojson является модулем Nodejs, Nodejs должен быть установлен в первую очередь; Nodejs устанавливается в другой статье «Практика гусеницы данных - с использованием nodejs». Вы можете загрузить файл установки по адресу https://nodejs.org/download/ под окном, а в Linux или Mac Mersperments вы можете обратиться к методам, предоставленным этой веб -страницей для установки. После подтверждения того, что Nodejs установлен, мы распаковываем файл загрузки, предоставленный правительством, и читаем его с помощью Topojson (в качестве примера, принимая границу границ округа и города):
npm install -g topojson topojson -s 0,0000001 -o округ.
Сгенерирован File County.json, который является необходимым файлом Topojson. Мы также можем использовать API для программно, но все станет более сложным, поэтому я не буду говорить об этом здесь. Особенно важно отметить, что исходные данные находятся в формате BIG5, поэтому нам нужно использовать параметр «-shapefile-кодирования», чтобы напомнить ShapeFile для использования правильного кодирования для конвертации. После того, как обработка и чертеж Topojson генерирует файл Topojson, мы используем функции, предоставленные модулем Topojson для чтения файла:
< svg width =" 800px " height =" 600px " viewBox =" 0 0 800 600 " > </ svg >
< script type =" text/javascript " src =" http://d3js.org/topojson.v1.min.js " > </ script >
< script >
d3 . json ( "county.json" , function ( topodata ) {
var features = topojson . feature ( topodata , topodata . objects [ "county" ] ) . features ;
// 這裡要注意的是 topodata.objects["county"] 中的 "county" 為原本 shp 的檔名
</ script >Затем используйте d3.geo.path с d3.geo.mercator для рисования:
var path = d3 . geo . path ( ) . projection ( // 路徑產生器
d3 . geo . mercator ( ) . center ( [ 121 , 24 ] ) . scale ( 6000 ) // 座標變換函式
) ;
d3 . select ( "svg" ) . selectAll ( "path" ) . data ( features ) . enter ( ) . append ( "path" ) . attr ( "d" , path ) ;Результат чертежа заключается в следующем: теперь мы можем дополнительно обработать карту, и обработка следующая:
d3 . select ( "svg" ) . selectAll ( "path" ) . data ( features ) . enter ( ) . append ( "path" ) . attr ( {
d : path ,
name : function ( d ) {
return d . properties [ Cname ] ;
} ,
fill : '#55AA00'
} ) ;Окончательный результат заключается в следующем:
Ссылка на http://bost.ocks.org/mike/map/ Автор написал функцию, которая может прочитать информацию о округе, городе, административном округе в файле JSON и нарисовать линию
d3 . select ( "#pathCanvas" ) . append ( "path" ) //縣市/行政區界線
. datum ( topojson . mesh ( topodata , topodata . objects [ type ] , function ( a , b ) { return a !== b ; } ) )
. attr ( "d" , path )
. attr ( "class" , "subunit-boundary" ) ;В то же время каждый тег пути прикреплен с классом, так что граничные линии могут быть покрыты цветами и стилями в последующих CSS следующим образом:
. subunit-boundary {
fill : none;
stroke : # 000 ;
stroke-dasharray : 2 , 2 ;
stroke-linejoin : round;
}Кроме того, мы можем использовать мышиный и мышечный, и будет отображаться название каждого округа и города, и цвет будет изменен следующим образом:
d3 . select ( "svg" ) . selectAll ( "path" ) . on ( "mouseenter" , function ( ) { // title div 顯示滑鼠所指向的縣市/行政區
fill = $ ( this ) . attr ( "fill" ) ;
$ ( this ) . attr ( "fill" , '#00DD77' ) ;
$ ( '#title' ) . html ( $ ( this ) . attr ( "name" ) ) ;
$ ( '#panel' ) . css ( { "height" : "20px" , "width" : "50px" } ) ;
} ) . on ( "mouseout" , function ( ) {
$ ( this ) . attr ( "fill" , fill ) ;
} ) ;
$ ( "path" ) . mouseover ( function ( ) { //panel 區塊跟隨滑鼠移動
$ ( "path" ) . mousemove ( function ( e ) {
mouseX = e . pageX ;
mouseY = e . pageY ;
} ) ;
$ ( '#panel' ) . css ( { 'top' : mouseY , 'left' : mouseX } ) . fadeIn ( 'slow' ) ;
} ) ;Вот проблема. Поскольку правительство не дает такой вещи, как широта и долгота в файле SHP, а некоторые бедствия, такие как землетрясения, расположены в широте и долготе землетрясения, но наша веб-страница-это просто простая карта вектора SVG, без так называемых координат. Поэтому мой метод состоит в том, чтобы включить карту Google и измерить длину Тайваня с правителем. После измерения длины Тайваня моей собственной веб -страницы и преобразования масштаба вы можете представить, где позиция границы SVG на моей веб -странице находится на карте Google. Принимая свою долготу и долготу, напишите две фанситоны, чтобы рассчитать его долготу и широту соответственно и преобразовать ее в то, где должен быть точка в SVG (этот метод очень глуп. Я знаю ... Я надеюсь, что кто -то может дать мне несколько советов о том, как лучше написать эту функцию. Я благодарен мне> <):
function mapTopixelX ( x ) {
var originX = 118.802981 , endX = 122.469668 ;
var webOriginX = 0 , webEndX = 800 ;
var resultX = ( x - originX ) * ( ( webEndX - webOriginX ) / ( endX - originX ) ) ;
return resultX ;
}
function mapTopixelY ( y ) {
var originY = 21.510473 , endY = 25.357116 ;
var webOriginY = 0 , webEndY = 900 ;
var resultY = 900 - ( y - originY ) * ( ( webEndY - webOriginY ) / ( endY - originY ) ) ;
return resultY ;
} Согласно инструкциям в предыдущем разделе «Обработка данных с несколькими источниками», в конце кода обрабатывается обработка данных, и можно вызвать следующую функцию, и все данные AJAX могут быть выдвинуты в массив и переданы в эту функцию в форме параметра, и диаграмма запускается:
function historyRain ( data , place ) {
reset ( ) ;
var rain_dataset = [ ] ;
for ( var i = 0 ; i < data . length ; i ++ ) {
rain_dataset . push ( { 'x' : ( 91 + i ) , 'y' : data [ i ] } ) ;
}
chart = new CanvasJS . Chart ( "chart" ,
{
theme : "theme1" ,
title : {
text : "台北各年份年雨量趨勢圖" ,
fontFamily : "微軟正黑體"
} ,
animationEnabled : true ,
axisX : {
interval : 1 ,
intervalType : "year" ,
labelFontColor : "black" ,
labelFontFamily : "微軟正黑體" ,
suffix : "年"
} ,
axisY : {
includeZero : false ,
title : "雨量數值 (單位mm)" ,
labelFontColor : "black" ,
labelFontFamily : "微軟正黑體"
} ,
toolTip : {
shared : true ,
content : "<span style='"'color: {color};'"'><strong>{name} : </strong></span> <span style='"'color: dimgrey;'"'>{y} (mm)</span> "
} ,
data : [
{
name : place ,
type : "area" ,
color : "rgba(0,255,0,0.6)" ,
indexLabelFontFamily : "微軟正黑體" ,
indexLabelFontColor : "black" ,
dataPoints : rain_dataset //將所有的data匯入canvas圖表當中
}
] ,
backgroundColor : 'rgba(0,0,0,0)' ,
} ) ;
chart . render ( ) ;
} Выше приведено внедрение проекта этого проекта, который немного прост. Если еще неясно, пожалуйста, напишите по электронной почте [email protected]. Я загрузил все архивные коды в GitHub, а также сгенерировал страницу GitHub. Те, кто хочет увидеть демонстрацию, также могут протестировать его. Если есть какие -либо ошибки, вы можете сообщить об этом (время производства короткое, должно быть много ошибок, пожалуйста, прощайте XD). Наконец, спасибо, что увидели последний, спасибо за поддержку и поддержку, ха -ха
-http: //blog.infographics.tw/2015/04/visualize-geographics-dith-d3js/
-http: //bost.ocks.org/mike/map/
-http: //canvasjs.com/
