我试图从这里重现示例,我为您复制了代码:
require(devtools)
install_github('ramnathv/rCharts@dev')
install_github('ramnathv/rMaps')
library(rMaps)
crosslet(
x = "country",
y = c("web_index", "universal_access", "impact_empowerment", "freedom_openness"),
data = web_index
)
执行不会产生任何错误,但导航器中的页面保持空白(在 Firefox 和 Chrome 中)。我检查了控制台中的元素并收到以下错误:
ReferenceError: head is not defined index.html:26:4
在 Chrome 中,错误是不同的,我为 js 库的每个链接加载资源失败。这很奇怪,因为链接似乎是有效的,而且我在 rCharts (来自同一作者的另一个 R 库)中的绘图函数没有相同的问题。
这是 index.html 代码。我可以看到头部元素有问题。(在副本中,为了空间,我删除了一些国家)
<!doctype HTML>
<meta charset = 'utf-8'>
<html>
<head>
<link rel='stylesheet' href='C:\Users\S Combes\Documents\R\R-3.2.0\library\rMaps\libraries\crosslet/styles.css'>
<link rel='stylesheet' href='C:\Users\S Combes\Documents\R\R-3.2.0\library\rMaps\libraries\crosslet/http://fonts.googleapis.com/css?family=Open+Sans'>
<script src='C:\Users\S Combes\Documents\R\R-3.2.0\library\rMaps\libraries\crosslet/head.load.min.js' type='text/javascript'></script>
<style>
.rChart {
display: block;
margin-left: auto;
margin-right: auto;
width: 800px;
height: 400px;
}
</style>
</head>
<body >
<div id="content" class="container"><div id="map"></div></div>
<script type="text/javascript">
var params = {"dom":"chart12fc45e47bf5","width":800,"height":400,"scope":"world","data":[{"country":"Argentina","web_index":55.2,"universal_access":47.1,"education_awareness":45.9,"access_affordability":67.9,"comm_infrastructure":47.2,"relevant_content":71.5,"web_use":82.8,"content_creation":56.1,"freedom_openness":52.2,"web_freedom":52.2,"impact_empowerment":39.8,"political_impact":49.7,"social_environmental":47.2,"economic_impact":33.4},{"country":"Australia","web_index":86.4,"universal_access":82.4,"education_awareness":75.8,"access_affordability":94.5,"comm_infrastructure":74.6,"relevant_content":92.6,"web_use":91.4,"content_creation":86.5,"freedom_openness":67.7,"web_freedom":67.7,"impact_empowerment":74.3,"political_impact":88,"social_environmental":71.1,"economic_impact":68.2},{"country":"Austria","web_index":84.8,"universal_access":85.9,"education_awareness":93.5,"access_affordability":89.4,"comm_infrastructure":72.8,"relevant_content":82.2,"web_use":81.3,"content_creation":77.7,"freedom_openness":78.6,"web_freedom":78.6,"impact_empowerment":66.4,"political_impact":89.3,"social_environmental":47.1,"economic_impact":69.8},{"country":"Bahrain","web_index":38.4,"universal_access":53.1,"education_awareness":57.2,"access_affordability":71.8,"comm_infrastructure":46.7,"relevant_content":59.3,"web_use":71.9,"content_creation":44.8,"freedom_openness":13.6,"web_freedom":13.6,"impact_empowerment":28.9,"political_impact":48.3,"social_environmental":15.2,"economic_impact":37.1},{"country":"Zimbabwe","web_index":10.1,"universal_access":17.7,"education_awareness":44.4,"access_affordability":29.1,"comm_infrastructure":22.4,"relevant_content":5.4,"web_use":10.5,"content_creation":9.4,"freedom_openness":22.8,"web_freedom":22.8,"impact_empowerment":11.2,"political_impact":25,"social_environmental":11.9,"economic_impact":13.8}],"id_field":"country","defaults":{"order":["web_index","universal_access","impact_empowerment","freedom_openness"],"active":"web_index"},"id":"chart12fc45e47bf5"}
head.ready(function(){
var myColorScale = d3.scale.linear()
.domain([1, 10, 20.1])
.range(["red", "yellow", "green"])
.interpolate(d3.cie.interpolateLab)
var config = {
map: getMap(params.scope),
data: {version: "1.0", id_field: params.id_field},
dimensions : {
"web_index": {
"title": "web_index",
"data": {
"dataSet": params.data ,
"field": "web_index"
}
},
"universal_access": {
"title": "universal_access",
"data": {
"dataSet": params.data ,
"field": "universal_access"
}
},
"education_awareness": {
"title": "education_awareness",
"data": {
"dataSet": params.data ,
"field": "education_awareness"
}
},
"access_affordability": {
"title": "access_affordability",
"data": {
"dataSet": params.data ,
"field": "access_affordability"
}
},
"comm_infrastructure": {
"title": "comm_infrastructure",
"data": {
"dataSet": params.data ,
"field": "comm_infrastructure"
}
},
"relevant_content": {
"title": "relevant_content",
"data": {
"dataSet": params.data ,
"field": "relevant_content"
}
},
"web_use": {
"title": "web_use",
"data": {
"dataSet": params.data ,
"field": "web_use"
}
},
"content_creation": {
"title": "content_creation",
"data": {
"dataSet": params.data ,
"field": "content_creation"
}
},
"freedom_openness": {
"title": "freedom_openness",
"data": {
"dataSet": params.data ,
"field": "freedom_openness"
}
},
"web_freedom": {
"title": "web_freedom",
"data": {
"dataSet": params.data ,
"field": "web_freedom"
}
},
"impact_empowerment": {
"title": "impact_empowerment",
"data": {
"dataSet": params.data ,
"field": "impact_empowerment"
}
},
"political_impact": {
"title": "political_impact",
"data": {
"dataSet": params.data ,
"field": "political_impact"
}
},
"social_environmental": {
"title": "social_environmental",
"data": {
"dataSet": params.data ,
"field": "social_environmental"
}
},
"economic_impact": {
"title": "economic_impact",
"data": {
"dataSet": params.data ,
"field": "economic_impact"
}
}
},
defaults: params.defaults,
};
new crosslet.MapView($("#map"),config)
})
function getMap(scope){
var map = []
map.world = {
leaflet: {
key: "af67a5248c104d27bff9e8d363b6db4a",
styleId: 96931, /* 81531, */
attribution: 'Map data © <ahref="http://openstreetmap.org">OpenStreetMap</a>'
},
view: {
center: [35.505, -1.09],
zoom: 2
},
geo: {
url: "http://rawgithub.com/markmarkoh/datamaps/master/src/js/data/world.topo.json",
name_field: "name",
id_field: "name",
topo_object: "world"
}
}
map.us = {
leaflet: {
key: "fe623ce312234f8f9333bbee72d4a176",
styleId: 96931, /* 64657, */
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a>'
},
view: {
center: [40.42, -98.73],
zoom:5
},
geo: {
url: "http://rawgithub.com/sztanko/crosslet/gh-pages/examples/us/data/us_counties.topo.json",
name_field: "NAME",
id_field: "GEOID",
topo_object: "us_counties"
}
}
return map[scope]
}
</script>
<script>
head.load(
"http://cdn.leafletjs.com/leaflet-0.4/leaflet.css",
"http://sztanko.github.io/crosslet/css/crosslet-min.css",
"//cdn.leafletjs.com/leaflet-0.4.4/leaflet.js",
"//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",
"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js",
"//cdnjs.cloudflare.com/ajax/libs/d3/3.0.1/d3.v3.min.js",
"//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js",
"//sztanko.github.io/crosslet/js/crosslet.js"
)
</script>
<script></script>
</body>
</html>