|
@@ -1,653 +0,0 @@
|
|
|
-// Raccatto i parametri dall'URL -- mi aspetto un parametro di nome 'link'!
|
|
|
-thisUrlParams = {};
|
|
|
-window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
|
|
|
- thisUrlParams[key] = value;
|
|
|
-});
|
|
|
-console.log('URL get params: ', thisUrlParams);
|
|
|
-
|
|
|
-// Funzioni per eseguire le queries
|
|
|
-function prepareQueryURL(query){
|
|
|
- sparqlEndpoint = 'http://dev.restore.ovi.cnr.it:8890/sparql/';
|
|
|
- sparqlUrlParams = '?default-graph-uri=&query=' + encodeURIComponent(query) + '&output=json&callback=?';
|
|
|
- return sparqlEndpoint + sparqlUrlParams;
|
|
|
-}
|
|
|
-
|
|
|
-function doJsonQuery(query){
|
|
|
-
|
|
|
- queryURL = prepareQueryURL(query);
|
|
|
-
|
|
|
- response = $.ajax({//OGGETTO
|
|
|
-
|
|
|
- url: queryURL,
|
|
|
- dataType: "json",
|
|
|
- success: function (data){},
|
|
|
- error: function (e) {}
|
|
|
- });
|
|
|
-
|
|
|
- return response;
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-// Funzioni per raccattare + stringhificare l'output
|
|
|
-queryStringOutput = "";
|
|
|
-function stringifyResponse(val){
|
|
|
- resultArray = val['results']['bindings'];
|
|
|
- out = "";
|
|
|
- for(i = 0; i < resultArray.length; i++){
|
|
|
- out = out + JSON.stringify(resultArray[i])
|
|
|
- }
|
|
|
- queryStringOutput = (queryStringOutput + out).replace("}{",",");
|
|
|
-}
|
|
|
-
|
|
|
-prefixes = "PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#> \
|
|
|
-PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> \
|
|
|
-PREFIX crm: <http://www.cidoc-crm.org/cidoc-crm/> \
|
|
|
-PREFIX owl: <http://www.w3.org/2002/07/owl#> \
|
|
|
-PREFIX schema: <http://schema.org/> \
|
|
|
-PREFIX foaf: <http://xmlns.com/foaf/0.1/> \
|
|
|
-PREFIX person: <http://www.w3.org/ns/person#>"
|
|
|
-
|
|
|
-query = prefixes + " SELECT DISTINCT ?place ?label ?coordinates \
|
|
|
-WHERE { \
|
|
|
-{?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
|
|
|
-?event_from crm:P01_has_domain ?pc ; \
|
|
|
-rdf:type crm:EL3_Receive_Letter; \
|
|
|
-crm:P26_moved_to ?place_from . \
|
|
|
-?place_from rdf:type crm:E53_Place ; \
|
|
|
-owl:sameAs ?place . \
|
|
|
-?place rdfs:label ?label ; \
|
|
|
-crm:P168_place_is_defined_by ?coordinates . \
|
|
|
-} UNION { \
|
|
|
-?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
|
|
|
-?event_from crm:P01_has_domain ?pc ; \
|
|
|
-rdf:type crm:EL2_Send_Letter; \
|
|
|
-crm:P27_moved_from ?place_from . \
|
|
|
-?place_from rdf:type crm:E53_Place ; \
|
|
|
-owl:sameAs ?place . \
|
|
|
-?place rdfs:label ?label ; \
|
|
|
-crm:P168_place_is_defined_by ?coordinates . \
|
|
|
-} \
|
|
|
-}"
|
|
|
-
|
|
|
-queryInfo = prefixes + " SELECT DISTINCT ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation (group_concat(distinct ?relative1 ;separator=', ') as ?relatives) ?qualification ?group \
|
|
|
-WHERE { \
|
|
|
-VALUES ?uri {<" + thisUrlParams.link + ">} \
|
|
|
-GRAPH ?graph {?uri rdfs:label ?label} \
|
|
|
-?uri foaf:name ?name . \
|
|
|
-OPTIONAL {?uri crm:P1_is_identified_by ?id . \
|
|
|
-?id rdfs:label ?identifier } \
|
|
|
-OPTIONAL {?uri foaf:givenName ?givenName} \
|
|
|
-OPTIONAL {?uri foaf:familyName ?familyName} \
|
|
|
-OPTIONAL {?uri foaf:gender ?gender} \
|
|
|
-OPTIONAL {?uri person:patronymicName ?patronymic } \
|
|
|
-OPTIONAL {?uri schema:hasOccupation ?uriOccupation . \
|
|
|
-?uriOccupation rdf:type schema:Occupation; \
|
|
|
-rdfs:label ?occupation } \
|
|
|
-OPTIONAL {?uri schema:honorificPrefix ?qualification} \
|
|
|
-OPTIONAL {?uri schema:relatedTo ?uriRel1 . \
|
|
|
-?uriRel1 rdfs:label ?relative1} \
|
|
|
-OPTIONAL {?uri crm:P100i_died_in ?Death . \
|
|
|
-?Death crm:P4_has_time-span ?Death_TS; \
|
|
|
-crm:P7_took_place_at ?Place_D .\
|
|
|
-?Death_TS rdfs:label ?Death_Date . \
|
|
|
-?Place_D rdfs:label ?Death_Place } \
|
|
|
-OPTIONAL {?uri crm:P98i_was_born ?Birth . \
|
|
|
-?Birth crm:P4_has_time-span ?Birth_TS; \
|
|
|
-crm:P7_took_place_at ?Place_B . \
|
|
|
-?Birth_TS rdfs:label ?Birth_Date . \
|
|
|
-?Place_B rdfs:label ?Birth_Place } \
|
|
|
-OPTIONAL {?uri crm:P107i_is_current_or_former_member_of ?uriGroup . \
|
|
|
-?uriGroup rdfs:label ?group } \
|
|
|
-} \
|
|
|
-GROUP BY ?graph ?label ?identifier ?name ?givenName ?familyName ?gender ?Birth_Date ?Birth_Place ?Death_Date ?Death_Place ?patronymic ?occupation ?qualification ?group "
|
|
|
-
|
|
|
-queryLetters = prefixes + " SELECT DISTINCT ?type ?document_uri ?document_name \
|
|
|
-WHERE {?pc crm:P02_has_range <" + thisUrlParams.link + "> . \
|
|
|
-?ev_send crm:P01_has_domain ?pc ; \
|
|
|
-rdfs:label ?type ; \
|
|
|
-rdfs:subClassOf ?event . \
|
|
|
-?document_uri crm:P25i_moved_by ?event ; \
|
|
|
-rdfs:label ?document_name . \
|
|
|
-}"
|
|
|
-
|
|
|
-queryNetwork = prefixes + " SELECT DISTINCT ?uri ?label ?uri2 ?label2 \
|
|
|
-WHERE { \
|
|
|
-{?event rdf:type crm:EL1_Exchange_Letters . \
|
|
|
-?event_to rdfs:subClassOf ?event; \
|
|
|
-rdf:type crm:EL2_Send_Letter ; \
|
|
|
-crm:P01_has_domain ?pc_to . \
|
|
|
-?pc_to crm:P02_has_range ?uri . \
|
|
|
-?uri rdfs:label ?label . \
|
|
|
-?event_from rdfs:subClassOf ?event; \
|
|
|
-rdf:type crm:EL3_Receive_Letter; \
|
|
|
-crm:P01_has_domain ?pc_from . \
|
|
|
-?pc_from crm:P02_has_range ?uri2 . \
|
|
|
-?uri2 rdfs:label ?label2 . \
|
|
|
-FILTER (?uri = <" + thisUrlParams.link + ">) \
|
|
|
-} UNION { \
|
|
|
-?event rdf:type crm:EL1_Exchange_Letters . \
|
|
|
-?event_to rdfs:subClassOf ?event; \
|
|
|
-rdf:type crm:EL3_Receive_Letter ; \
|
|
|
-crm:P01_has_domain ?pc_from . \
|
|
|
-?pc_from crm:P02_has_range ?uri . \
|
|
|
-?uri rdfs:label ?label . \
|
|
|
-?event_from rdfs:subClassOf ?event; \
|
|
|
-rdf:type crm:EL2_Send_Letter; \
|
|
|
-crm:P01_has_domain ?pc_to . \
|
|
|
-?pc_to crm:P02_has_range ?uri2 . \
|
|
|
-?uri2 rdfs:label ?label2 . \
|
|
|
-FILTER (?uri = <" + thisUrlParams.link + ">) \
|
|
|
-} \
|
|
|
-} LIMIT 30"
|
|
|
-
|
|
|
-queryURL = prepareQueryURL(query);
|
|
|
-
|
|
|
-queryNet = prepareQueryURL(queryNetwork);
|
|
|
-
|
|
|
-query = prepareQueryURL(queryInfo);
|
|
|
-
|
|
|
-queryEx = prepareQueryURL(queryLetters);
|
|
|
-
|
|
|
-response = $.ajax({
|
|
|
-
|
|
|
- url: query,
|
|
|
- dataType: "json",
|
|
|
- success: function (data){
|
|
|
- handle_data(data);
|
|
|
- },
|
|
|
- error: function (e) {}
|
|
|
-});
|
|
|
-
|
|
|
-response = $.ajax({
|
|
|
-
|
|
|
- url: queryURL,
|
|
|
- dataType: "json",
|
|
|
- success: function (data){
|
|
|
- handle_map(data);
|
|
|
- },
|
|
|
- error: function (e) {}
|
|
|
-});
|
|
|
-
|
|
|
-responseNet = $.ajax({
|
|
|
-
|
|
|
- url: queryNet,
|
|
|
- dataType: "json",
|
|
|
- success: function (data){
|
|
|
- handle_network(data);
|
|
|
- },
|
|
|
- error: function (e) {}
|
|
|
-});
|
|
|
-
|
|
|
-responseLet = $.ajax({
|
|
|
-
|
|
|
- url: queryEx,
|
|
|
- dataType: "json",
|
|
|
- success: function (data){
|
|
|
- handle_Letters(data);
|
|
|
- },
|
|
|
- error: function (e) {}
|
|
|
-});
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-function handle_data(json) {
|
|
|
-
|
|
|
- console.log(json['results']['bindings']);
|
|
|
-
|
|
|
- var graph = "";
|
|
|
- var label = "";
|
|
|
-
|
|
|
- if ("givenName" in json.results.bindings) {
|
|
|
- givenName = value['givenName']['value'];
|
|
|
- alert(givenName);
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- $.each(
|
|
|
- json['results']['bindings'],
|
|
|
- function (index, value) {
|
|
|
- var graph = value['graph']['value'];
|
|
|
- var label = value['label']['value'];
|
|
|
- var name = value['name']['value'];
|
|
|
- var givenName = "";
|
|
|
- var familyName = "";
|
|
|
- var gender = "";
|
|
|
- var patronymic = "";
|
|
|
- var occupation = "";
|
|
|
- var relative = "";
|
|
|
- var identifier = "";
|
|
|
- var birth_date = "";
|
|
|
- var birth_place = "";
|
|
|
- var death_date = "";
|
|
|
- var death_place = "";
|
|
|
- var qualification = "";
|
|
|
- var group = "";
|
|
|
-
|
|
|
- if (value.hasOwnProperty('givenName')) {
|
|
|
- $("#givenName").css("display", "flex");
|
|
|
- givenName = value['givenName']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('familyName')) {
|
|
|
- $("#familyName").css("display", "flex");
|
|
|
- familyName = value['familyName']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('gender')) {
|
|
|
- $("#gender").css("display", "flex");
|
|
|
- gender = value['gender']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('patronymic')) {
|
|
|
- $("#patronymic").css("display", "flex");
|
|
|
- patronymic = value['patronymic']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('occupation')) {
|
|
|
- $("#occupation").css("display", "flex");
|
|
|
- occupation = value['occupation']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('relatives')) {
|
|
|
- if (value['relatives']['value'] != "") {
|
|
|
- $("#relatives").css("display", "flex");
|
|
|
- relative = value['relatives']['value'];
|
|
|
- }
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('qualification')) {
|
|
|
- $("#honorific").css("display", "flex");
|
|
|
- qualification = value['qualification']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('Birth_Date')) {
|
|
|
- $("#BirthDate").css("display", "flex");
|
|
|
- birth_date = value['Birth_Date']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('Birth_Place')) {
|
|
|
- $("#BirthPlace").css("display", "flex");
|
|
|
- birth_place = value['Birth_Place']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('Death_Date')) {
|
|
|
- $("#DeathDate").css("display", "flex");
|
|
|
- death_date = value['Death_Date']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('Death_Place')) {
|
|
|
- $("#DeathPlace").css("display", "flex");
|
|
|
- death_place = value['Death_Place']['value'];
|
|
|
- }
|
|
|
- if (value.hasOwnProperty('group')) {
|
|
|
- $("#groups").css("display", "flex");
|
|
|
- group = value['group']['value'];
|
|
|
- }
|
|
|
-
|
|
|
-
|
|
|
- document.getElementById("grafo").innerHTML = graph;
|
|
|
- document.getElementById("nome_persona").innerHTML = label;
|
|
|
- document.getElementById("nome").innerHTML = name;
|
|
|
- document.getElementById("genere").innerHTML = gender;
|
|
|
- document.getElementById("nome_proprio").innerHTML = givenName;
|
|
|
- document.getElementById("nome_famiglia").innerHTML = familyName;
|
|
|
- document.getElementById("patronimico").innerHTML = patronymic;
|
|
|
- document.getElementById("avi").innerHTML = relative;
|
|
|
- document.getElementById("qualifica").innerHTML = qualification;
|
|
|
- document.getElementById("occupazione").innerHTML = occupation;
|
|
|
- document.getElementById("data_nascita").innerHTML = birth_date;
|
|
|
- document.getElementById("data_morte").innerHTML = death_date;
|
|
|
- document.getElementById("luogo_nascita").innerHTML = birth_place;
|
|
|
- document.getElementById("luogo_morte").innerHTML = death_place;
|
|
|
- document.getElementById("gruppi_appartenenza").innerHTML = group;
|
|
|
-
|
|
|
-
|
|
|
- document.getElementById("nome1").innerHTML = label;
|
|
|
- document.getElementById("nome2").innerHTML = label;
|
|
|
- document.getElementById("nome_au").innerHTML = label;
|
|
|
- document.getElementById("nome_ap").innerHTML = label;
|
|
|
- document.getElementById("nome_al").innerHTML = label;
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-function handle_Letters(json) {
|
|
|
-
|
|
|
- console.log(json);
|
|
|
-
|
|
|
- const send = {};
|
|
|
- const receive = {};
|
|
|
-
|
|
|
- var i=0;
|
|
|
- var j=0;
|
|
|
-
|
|
|
- $.each(
|
|
|
- json['results']['bindings'],
|
|
|
- function (index, value) {
|
|
|
- type = value['type']['value'];
|
|
|
- uri = value['document_uri']['value'];
|
|
|
- title = value['document_name']['value'];
|
|
|
- if (type == "Invio") {
|
|
|
- send[uri] = title;
|
|
|
- i++;
|
|
|
- } else {
|
|
|
- receive[uri] = title;
|
|
|
- j++;
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- var Send_Letters = "";
|
|
|
- var Receive_Letters = "";
|
|
|
-
|
|
|
- for (var key in send) {
|
|
|
- Send_Letters += "<div class='row'><div class='col-10'>" + send[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
|
|
|
- }
|
|
|
-
|
|
|
- for (var key in receive) {
|
|
|
- Receive_Letters += "<div class='row'><div class='col-10'>" + receive[key] + "</div><div class='col'><a href='" + key + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div></div>";
|
|
|
- }
|
|
|
-
|
|
|
- document.getElementById("l_send").innerHTML = i;
|
|
|
- document.getElementById("l_receive").innerHTML = j;
|
|
|
- document.getElementById("letters_send").innerHTML = Send_Letters;
|
|
|
- document.getElementById("letters_receive").innerHTML = Receive_Letters;
|
|
|
-
|
|
|
- if (i==0) {
|
|
|
- var messaggio = "<p>Nessun risultato trovato</p>";
|
|
|
- document.getElementById("letters_send").innerHTML = messaggio;
|
|
|
- }
|
|
|
-
|
|
|
- if (j==0) {
|
|
|
- var messaggio = "<p>Nessun risultato trovato</p>";
|
|
|
- document.getElementById("letters_receive").innerHTML = messaggio;
|
|
|
- }
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-function handle_map(json) {
|
|
|
- console.log(json);
|
|
|
-
|
|
|
- const locations = [];
|
|
|
- const place_names = [];
|
|
|
-
|
|
|
- var lat = 0;
|
|
|
- var long = 0;
|
|
|
- var i=0;
|
|
|
- var myPlaces = "";
|
|
|
-
|
|
|
- $.each(
|
|
|
- json['results']['bindings'],
|
|
|
- function (index, value) {
|
|
|
- const loc = []
|
|
|
- var uri = value['place']['value'];
|
|
|
- var label = value['label']['value'];
|
|
|
- var coord = value['coordinates']['value'];
|
|
|
- const coordinates = coord.split(", ");
|
|
|
- loc.push(label);
|
|
|
- myPlaces += "<div class='row'><div class='clickPlace col-10' data-point='"+ coordinates + "'>" + label + "</div><div class='luogo col' id='" +
|
|
|
- uri + "'><i class='far fa-map' style='cursor:pointer'></i></div></div>";
|
|
|
- loc.push(coordinates[0]);
|
|
|
- lat += parseInt(coordinates[0]);
|
|
|
- loc.push(coordinates[1]);
|
|
|
- long += parseInt(coordinates[1].replace(/^(\.)/,"0.").replace("-.", "-0."));
|
|
|
- locations.push(loc);
|
|
|
- i++;
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- var latitude = lat/i;
|
|
|
- var longitude = long/i;
|
|
|
-
|
|
|
- document.getElementById("list_places_person").innerHTML = myPlaces;
|
|
|
-
|
|
|
-
|
|
|
- var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
|
|
|
- cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade, Points © 2012 LINZ',
|
|
|
- cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 17, attribution: cloudmadeAttribution}),
|
|
|
- latlng = new L.LatLng(latitude, longitude);
|
|
|
-
|
|
|
-
|
|
|
- var map = new L.Map('map', {center: latlng, zoom: 5, layers: [cloudmade]});
|
|
|
- mapLink = '<a href="http://openstreetmap.org">OpenStreetMap</a>';
|
|
|
-
|
|
|
- var markers = new L.MarkerClusterGroup();
|
|
|
- var markerList = [];
|
|
|
-
|
|
|
- var geo = new L.tileLayer(
|
|
|
- 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
- attribution: '© ' + mapLink + ' Contributors',
|
|
|
- maxZoom: 18,
|
|
|
- }).addTo(map);
|
|
|
-
|
|
|
- function populate() {
|
|
|
- for (var i = 0; i < locations.length; i++) {
|
|
|
- var a = locations[i];
|
|
|
- var title = a[0];
|
|
|
- var marker = new L.Marker(new L.LatLng(a[1], a[2]), { title: title });
|
|
|
- marker.bindPopup(title);
|
|
|
- markers.addLayer(marker);
|
|
|
- markerList.push(marker);
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- populate();
|
|
|
-
|
|
|
- map.addLayer(markers);
|
|
|
-
|
|
|
- $('.clickPlace').on('click', function(){
|
|
|
- // parse lat and lng from the divs data attribute
|
|
|
- var latlng = $(this).data().point.split(',');
|
|
|
- var lat = latlng[0];
|
|
|
- var lng = latlng[1];
|
|
|
- var zoom = 10;
|
|
|
-
|
|
|
- // set the view
|
|
|
- map.setView([lat, lng], zoom);
|
|
|
-});
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-//out = "";
|
|
|
-//for(i = 0; i < resultArray.length; i++){
|
|
|
- // out = out + JSON.stringify(resultArray[i])
|
|
|
-//}
|
|
|
-//queryStringOutput = (queryStringOutput + out).replace("}{",",");
|
|
|
-
|
|
|
-
|
|
|
-/*
|
|
|
-
|
|
|
-var locations = [
|
|
|
- ["LOCATION_1", 11.8166, 122.0942],
|
|
|
- ["LOCATION_2", 11.9804, 121.9189],
|
|
|
- ["LOCATION_3", 10.7202, 122.5621],
|
|
|
- ["LOCATION_4", 11.3889, 122.6277],
|
|
|
- ["LOCATION_5", 10.5929, 122.6325]
|
|
|
-];
|
|
|
-
|
|
|
-var map = L.map('map').setView([11.206051, 122.447886], 8);
|
|
|
-mapLink =
|
|
|
- '<a href="http://openstreetmap.org">OpenStreetMap</a>';
|
|
|
-L.tileLayer(
|
|
|
- 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
|
- attribution: '© ' + mapLink + ' Contributors',
|
|
|
- maxZoom: 18,
|
|
|
- }).addTo(map);
|
|
|
-
|
|
|
-for (var i = 0; i < locations.length; i++) {
|
|
|
- marker = new L.marker([locations[i][1], locations[i][2]])
|
|
|
- .bindPopup(locations[i][0])
|
|
|
- .addTo(map);
|
|
|
-}
|
|
|
-*/
|
|
|
-
|
|
|
-function handle_network(json) {
|
|
|
- console.log(json);
|
|
|
-
|
|
|
- const myArray = {};
|
|
|
- const myLinks = [];
|
|
|
- var listNodes = "";
|
|
|
- var listLinks = "";
|
|
|
- var ArrayNames = "";
|
|
|
-
|
|
|
- var max = 0;
|
|
|
-
|
|
|
- $.each(
|
|
|
- json['results']['bindings'],
|
|
|
- function (index, value) {
|
|
|
- const topo = [];
|
|
|
-
|
|
|
- var id = value['uri']['value'];
|
|
|
- var name = value['label']['value'];
|
|
|
- var id2 = value['uri2']['value'];
|
|
|
- var name2 = value['label2']['value'];
|
|
|
- ArrayNames += "<div class='row'><div class='col-9'>" +
|
|
|
- name2 + "</div><div class='col'><a target='_blank' href='" +
|
|
|
- id2 + "'><i class='fas fa-external-link-alt' aria-hidden='true'></i></a></div><div class='persona col' id='" +
|
|
|
- id2 + "'><i class='fa fa-user' style='cursor:pointer'></i></div></div></div>";
|
|
|
- myArray[id] = name;
|
|
|
- myArray[id2] = name2;
|
|
|
- myLinks.push([id, id2]);
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
- document.getElementById("list_person_network").innerHTML = ArrayNames;
|
|
|
-
|
|
|
- for (var key in myArray) {
|
|
|
- listNodes += '{ "id": \"' + key + '\", "name": \"' + myArray[key] + '\"},';
|
|
|
- }
|
|
|
-
|
|
|
- for (var i in myLinks) {
|
|
|
- var source = myLinks[i][0]
|
|
|
- var target = myLinks[i][1]
|
|
|
- listLinks += '{ "source": \"' + source + '\", "target": \"' + target + '\"},';
|
|
|
- }
|
|
|
-
|
|
|
- console.log(myLinks);
|
|
|
-
|
|
|
- let listN = ('[' + listNodes + ']').replace(',]', ']');
|
|
|
- let listL = ('[' + listLinks + ']').replace(',]', ']');
|
|
|
-
|
|
|
-
|
|
|
- const nodes = JSON.parse(listN);
|
|
|
- const links = JSON.parse(listL);
|
|
|
-
|
|
|
- console.log(nodes);
|
|
|
- console.log(links);
|
|
|
-
|
|
|
-
|
|
|
- var svg = d3.select("svg"),
|
|
|
- width = +svg.attr("width"),
|
|
|
- height = +svg.attr("height");
|
|
|
-
|
|
|
- var simulation = d3.forceSimulation()
|
|
|
- .force("link", d3.forceLink().id(function(d) { return d.id; }))
|
|
|
- //.force("charge", d3.forceManyBody().strength(-200))
|
|
|
- .force('charge', d3.forceManyBody()
|
|
|
- .strength(-500)
|
|
|
- .theta(0.8)
|
|
|
- .distanceMax(300)
|
|
|
- )
|
|
|
- // .force('collide', d3.forceCollide()
|
|
|
- // .radius(d => 40)
|
|
|
- // .iterations(2)
|
|
|
- // )
|
|
|
- .force("center", d3.forceCenter(width / 4, height / 3));
|
|
|
-
|
|
|
-
|
|
|
- links.forEach(function(d){
|
|
|
-// d.source = d.source_id;
|
|
|
-// d.target = d.target_id;
|
|
|
- });
|
|
|
-
|
|
|
- var link = svg.append("g")
|
|
|
- .style("stroke", "#aaa")
|
|
|
- .selectAll("line")
|
|
|
- .data(links)
|
|
|
- .enter().append("line");
|
|
|
-
|
|
|
- var node = svg.append("g")
|
|
|
- .attr("class", "nodes")
|
|
|
- .selectAll("circle")
|
|
|
- .data(nodes)
|
|
|
- .enter().append("circle")
|
|
|
- .attr("r", 2)
|
|
|
- .attr("id", function (d) { return d.id; })
|
|
|
- .call(d3.drag()
|
|
|
- .on("start", dragstarted)
|
|
|
- .on("drag", dragged)
|
|
|
- .on("end", dragended));
|
|
|
-
|
|
|
- var label = svg.append("g")
|
|
|
- .attr("class", "labels")
|
|
|
- .selectAll("text")
|
|
|
- .data(nodes)
|
|
|
- .enter().append("text")
|
|
|
- .attr("class", "label")
|
|
|
- .call(d3.drag()
|
|
|
- .on("start", dragstarted)
|
|
|
- .on("drag", dragged)
|
|
|
- .on("end", dragended))
|
|
|
- .text(function(d) { return d.name; });
|
|
|
-
|
|
|
- simulation
|
|
|
- .nodes(nodes)
|
|
|
- .on("tick", ticked);
|
|
|
-
|
|
|
- simulation.force("link")
|
|
|
- .links(links);
|
|
|
-
|
|
|
- function ticked() {
|
|
|
- link
|
|
|
- .attr("x1", function(d) { return d.source.x; })
|
|
|
- .attr("y1", function(d) { return d.source.y; })
|
|
|
- .attr("x2", function(d) { return d.target.x; })
|
|
|
- .attr("y2", function(d) { return d.target.y; });
|
|
|
-
|
|
|
- node
|
|
|
- .attr("r", 5)
|
|
|
- .style("fill", "#efefef")
|
|
|
- .style("stroke", "#424242")
|
|
|
- .style("stroke-width", "1px")
|
|
|
- .attr("cx", function (d) { return d.x+5; })
|
|
|
- .attr("cy", function(d) { return d.y-3; });
|
|
|
-
|
|
|
- label
|
|
|
- .attr("x", function(d) { return d.x+12; })
|
|
|
- .attr("y", function (d) { return d.y+1; })
|
|
|
- .style("font-size", "10px").style("fill", "#333");
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- function dragstarted(d) {
|
|
|
- if (!d3.event.active) simulation.alphaTarget(0.3).restart()
|
|
|
- d.fx = d.x
|
|
|
- d.fy = d.y
|
|
|
- // simulation.fix(d);
|
|
|
- }
|
|
|
-
|
|
|
- function dragged(d) {
|
|
|
- d.fx = d3.event.x
|
|
|
- d.fy = d3.event.y
|
|
|
- // simulation.fix(d, d3.event.x, d3.event.y);
|
|
|
- }
|
|
|
-
|
|
|
- function dragended(d) {
|
|
|
- d.fx = d3.event.x
|
|
|
- d.fy = d3.event.y
|
|
|
- if (!d3.event.active) simulation.alphaTarget(0);
|
|
|
- //simulation.unfix(d);
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
-$(document).on("click", ".luogo", function (ev) {
|
|
|
-
|
|
|
- var link = this.id;
|
|
|
- //alert(nome_autore);
|
|
|
- //$('#myModal').text("");
|
|
|
- window.open("Luogo.html?link="+this.id);
|
|
|
-
|
|
|
-
|
|
|
- });
|
|
|
-
|
|
|
-$(document).on("click", ".persona", function (ev) {
|
|
|
-
|
|
|
- var link = this.id;
|
|
|
- //alert(nome_autore);
|
|
|
- //$('#myModal').text("");
|
|
|
- window.open("Persona.html?link="+this.id);
|
|
|
-
|
|
|
-
|
|
|
- });
|