Javascript 使用lodlive可视化D2R rdf数据_Javascript_Rdf_Data Visualization_Linked Data_D2rq

Javascript 使用lodlive可视化D2R rdf数据

javascript rdf

Javascript 使用lodlive可视化D2R rdf数据,javascript,rdf,data-visualization,linked-data,d2rq,Javascript,Rdf,Data Visualization,Linked Data,D2rq,我正在研究发布链接数据我使用D2R从关系数据库发布数据现在，我需要可视化这些数据，所以我想使用lodlive脚本我从中获得了项目源代码我用这个代码来做，但它不起作用 <!DOCTYPE html> <html style="width: 100%; height: 100%"> <head> <title>LodLive Testing</title> <link rel="stylesheet" hr

我正在研究发布链接数据

我使用D2R从关系数据库发布数据

现在，我需要可视化这些数据，所以我想使用lodlive脚本

我从中获得了项目源代码

我用这个代码来做，但它不起作用

<!DOCTYPE html>
<html style="width: 100%; height: 100%">
  <head>
    <title>LodLive Testing</title>
    <link rel="stylesheet" href="dist/ml-lodlive.all.css">
  </head>
  <body style="width: 100%; height: 100%">
    <div id="graph" style="width: 100%; height: 100%"></div>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="dist/ml-lodlive.complete.js"></script>
    <script src="js/profile/profile.example.js"></script>
    <script>
        MyProfileObject.connection['http:'].endpoint = 'http://localhost:1111/sparql'; // to use the out-of-the-box MarkLogic SPARQL support
        MyProfileObject.connection['http:'].accepts = 'application/sparql-results+json'; // for regular XHR requests be sure to add this header to receive json response
        MyProfileObject.endpoints.jsonp = false; // depending on if you are using jsonp
        MyProfileObject.endpoints.all = ''; // and additional query params you wish to include in every request

      'use strict';
      jQuery('#graph').lodlive({ profile: MyProfileObject, firstUri: 'http://localhost:1111/data/organization/2', ignoreBnodes: true }); // 'http://dbpedia.org/resource/Philadelphia_Flyers'
    </script>
  </body>
</html>


现场测试
MyProfileObject.connection['http:'].endpoint='1]http://localhost:1111/sparql'; // 使用现成的MarkLogic SPARQL支持
MyProfileObject.connection['http:'].accepts='application/sparql results+json'；//对于常规的XHR请求，请确保添加此标头以接收json响应
MyProfileObject.endpoints.jsonp=false；//这取决于您是否在使用jsonp
MyProfileObject.endpoints.all=''；//以及希望在每个请求中包含的其他查询参数
"严格使用",；
jQuery（'#graph'）.lodlive（{profile:MyProfileObject，firstUri:'http://localhost:1111/data/organization/2“，ignoreBnodes:true}）；/”http://dbpedia.org/resource/Philadelphia_Flyers'

而rdf数据是

@prefix unio:    <http://tishreen.edu.sy/UniversityOntology.owl#> .
@prefix xhtml:   <http://www.w3.org/1999/xhtml/vocab/#> .
@prefix d2rq:    <http://www.wiwiss.fu-berlin.de/suhl/bizer/D2RQ/0.1#> .
@prefix org:     <http://www.w3.org/ns/org#> .
@prefix geonames:  <http://www.geonames.org/ontology#> .
@prefix rdfs:    <http://www.w3.org/2000/01/rdf-schema#> .
@prefix prvTypes:  <http://purl.org/net/provenance/types#> .
@prefix event:   <http://purl.org/NET/c4dm/event.owl#> .
@prefix map:     <http://localhost:1111/resource/#> .
@prefix rdf:     <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix dc:      <http://purl.org/dc/terms/> .
@prefix prv:     <http://purl.org/net/provenance/ns#> .
@prefix db:      <http://localhost:1111/resource/> .
@prefix foaf:    <http://xmlns.com/foaf/0.1/> .
@prefix sp:      <http://spinrdf.org/sp#> .
@prefix void:    <http://rdfs.org/ns/void#> .
@prefix teach:   <http://linkedscience.org/teach/ns#> .
@prefix vcard:   <http://www.w3.org/2006/vcard/ns#> .
@prefix bibo:    <http://purl.org/ontology/bibo/> .
@prefix owl:     <http://www.w3.org/2002/07/owl#> .
@prefix xsd:     <http://www.w3.org/2001/XMLSchema#> .
@prefix aiiso:   <http://purl.org/vocab/aiiso/schema#> .
@prefix vocab:   <http://localhost:1111/resource/vocab/> .
@prefix doap:    <http://usefulinc.com/ns/doap#> .

<http://localhost:1111/resource/organization/3>
      a       aiiso:College , <http://dbpedia.org/ontology/College> , foaf:Organization , owl:Thing , org:Organization ;
      rdfs:comment "about" ;
      rdfs:isDefinedBy <http://localhost:1111/data/organization/3> ;
      rdfs:label "كلية الهندسة المدنية" ;
      aiiso:part_of <http://localhost:1111/resource/organization/1> ;
      geonames:locatedIn <http://sws.geonames.org/7635195/> ;
      vcard:email "info@tishreen.edu.sy" ;
      vcard:telephone "041555888" ;
      org:identifier "5564" ;
      org:purpose "purpose" ;
      org:subOrganizationOf
              <http://localhost:1111/resource/organization/1> ;
      foaf:logo "http://url" ;
      foaf:page <http://localhost:1111/page/organization/3> ;
      foaf:phone "041222555" .

<http://localhost:1111/data/organization/3>
      a       foaf:Document , prv:DataItem ;
      rdfs:label "RDF Description of كلية الهندسة المدنية" ;
      dc:date "2017-10-26T20:08:47.974Z"^^xsd:dateTime ;
      prv:containedBy <http://localhost:1111/dataset> ;
      void:inDataset <http://localhost:1111/dataset> ;
      foaf:primaryTopic <http://localhost:1111/resource/organization/3> .

@前缀unio:。
@前缀xhtml:。
@前缀d2rq:。
@前缀组织：。
@前缀地理名称：。
@前缀rdfs:。
@前缀prvTypes:。
@前缀事件：。
@前缀映射：。
@前缀rdf:。
@前缀dc:。
@前缀prv:。
@前缀db:。
@前缀foaf:。
@前缀sp:。
@前缀无效：。
@前缀教学：。
@前缀vcard:。
@前缀bibo:。
@前缀owl:。
@前缀xsd:。
@前缀aiiso:。
@前缀vocab:。
@前缀doap:。
aiiso:学院，foaf:组织，owl:事物，组织：组织；
rdfs：评论“关于”；
rdfs:isDefinedBy；
rdfs：标签“كلةةهندة㶟ل㶡”；
aiiso：本标准第十一部分；
地理名称：locatedIn；
vcard:电子邮件“info@tishreen.edu.sy" ;
vcard：电话“041555888”；
组织：标识符“5564”；
组织：目的“目的”；
组织：子组织
;
foaf：徽标“http://url" ;
foaf:page；
foaf：电话“041222555”。
foaf:Document，prv:DataItem；
rdfs：标签“RDF描述”的名称；
dc:date“2017-10-26T20:08:47.974Z”^^xsd:dateTime；
prv：受控制的；
void:inDataset；
foaf：主要话题。

我可以使用此HTML页面：

<!DOCTYPE html>
<html style="width: 100%; height: 100%">
  <head>
    <title>LodLive Testing</title>
    <link rel="stylesheet" href="dist/ml-lodlive.all.css">
  </head>

  <body style="width: 100%; height: 100%">
    <div id="graph" style="width: 100%; height: 100%"></div>
    <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="dist/ml-lodlive.complete.js"></script>
    <script src="js/profile/profile.example.js"></script>
    <script>
      'use strict';
  jQuery('#graph').lodlive({ profile: ExampleProfile, firstUri:     'http://localhost:1111/data/organization/2', ignoreBnodes: true });
    </script>
  </body>
</html>


现场测试
"严格使用",；
jQuery（'#graph'）.lodlive（{profile:ExampleProfile，firstUri:'http://localhost:1111/data/organization/2“，ignoreBnodes:true}）；

并创建了一个概要文件“profile.example.js”，该文件声明端点为

ML，而LodLive是为从MarkLogic提取数据而优化的，对吗？（除了其他改进）您是否已将D2R输出加载到MarkLogic数据库中？如果没有，您可能只想使用遗留的LodLive:并将数据存储在Virtuoso或其他一些triplestore中，可能与dvcama的SPARQL代理结合使用。我发现在UbuntuLinux上设置LodLive+Virtuoso非常简单，如有必要，可以进一步讨论。