Javascript 我们可以在json数据文件中添加图像并使用D3.js在页面上调用它吗
下面是我在页面上显示世界地图的代码。我试图找到将图像存储在json数据文件中的方法，并在每个国家的工具提示函数中调用它。工具提示函数当前映射到json文件并显示我输入的数据 谢谢Javascript 我们可以在json数据文件中添加图像并使用D3.js在页面上调用它吗,javascript,html,json,image,d3.js,Javascript,Html,Json,Image,D3.js,下面是我在页面上显示世界地图的代码。我试图找到将图像存储在json数据文件中的方法，并在每个国家的工具提示函数中调用它。工具提示函数当前映射到json文件并显示我输入的数据 谢谢 <!DOCTYPE html> <meta charset="utf-8"> <style> .country:hover { stroke: #B3B5B3; stroke-width: 3px; } span1 { font-size:18px;
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.country:hover {
stroke: #B3B5B3;
stroke-width: 3px;
}
span1 {
font-size:18px;
font-family:Arial, Helvetica, sans-serif;
}
span2 {
font-size: 14px;
font-family:Arial, Helvetica, sans-serif;
}
.text {
font-size:14px;
text-transform:none;
font-family:Arial, Helvetica, sans-serif;
}
.point {
padding: 2px 2px 2px 2px;
}
#container {
margin-top:20px;
height:85%;
overflow:hidden;
background: #e8e9e8;
width:100%;
}
div .fixed {
position: fixed;
/*left: 68.9%;
top: 61.8%;*/
top:61%;
margin-right:10px;
right:0;
width: 23%;
z-index:1;
opacity:0.9;
}
/*@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 667px) and (min-device-width: 375px) and (orientation: landscape) {
}*/
@-moz-document url-prefix() {
div .fixed {
left:75.8%;
top:62%;
}
}
/* @media screen and (min-device-width: 1280px) and (max-device-width: 1280px) {
div .fixed {
top:62%;
margin-right:10px;
}
}*/
/* (1920x1080) Full HD Display */
/*@media screen and (min-device-width: 1680px) and (max-device-width: 1920px) {*/
/* insert styles here */
/*}*/
/*@media screen and (min-device-width: 1024px) and (max-device-width: 1024px) {*/
/* insert styles here */
/*div .fixed {
top: 74%;
margin-right: 16px;}
}*/
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) and (min-device-width: 320px) and (orientation: portrait) {
div .fixed {
top: 28.1%;
left: 68.13%;
width: 30%;
}
}
/* ----------- iPhone 6 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
top: 26.1%;
left: 68.13%;
width: 30%;
}
}
/* Portrait */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: portrait) {
div .fixed {
top: 26.1%;
left: 68.13%;
width: 30%;
}
}
/* Landscape */
@media only screen
and (min-device-width: 375px)
and (max-device-width: 667px)
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) {
div .fixed {
top: 77.1%;
left: 68.13%;
width: 30%;
}
.text {
font-size:10px;
}
}
/* ----------- iPad 3 and 4 ----------- */
/* Portrait and Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
top: 32%;
margin-right: 16px;
}
}
/* Portrait */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: portrait)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
top: 32%;
margin-right: 16px;
}
}
/* Landscape */
@media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (orientation: landscape)
and (-webkit-min-device-pixel-ratio: 2) {
div .fixed {
top: 58%;
margin-right: 16px;
}
}
/* (1920x1080) Full HD Display */
@media screen and (min-width: 1920px) {
/* insert styles here */
div .fixed {
top:90%;
left:76%;
}
}
/* (1680x1050) WSXGA+ Display */
@media screen and (min-width: 1680px) {
/* insert styles here */
}
/* (1440x900) WXGA+ Display */
@media screen and (mix-width: 1440px) {
/* insert styles here */
div .fixed{
top:80%;
}
}
.hidden {
display: none;
}
div.tooltip {
color: #222;
background: #f0f1f2;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
opacity: 0.9;
position: absolute;
z-index:2;
}
/*.whats{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#808080;
padding-left:75%;
}
.tooltips {
top:-80px;
left:20px;
color: #222;
background: #f0f1f2;
padding: .5em;
text-shadow: #f5f5f5 0 1px 0;
border-radius: 2px;
box-shadow: 0px 0px 2px 0px #a6a6a6;
position:absolute;
z-index:2;
opacity:0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity 0.5s;
-ms-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.whats:hover .tooltips{
opacity:1;
}*/
.graticule {
fill: none;
stroke: #bbb;
stroke-width: 0px;
stroke-opacity: .5;
}
.equator {
stroke: #f0f1f2;
stroke-width: 1px;
}
.kicker {
font:15px;
color:black;
;
font-family:Arial, Helvetica, sans-serif;
margin-bottom:2px;
}
.breaks {
overflow: hidden;
height: 30px;
margin: 0;
list-style: none;
}
.breaks li {
float: left;
height: 30px;
margin: 0 1px 0 0;
position: relative;
width: 16%;
}
.breaks .bar {
width: 100%;
height: 10px;
position: relative;
}
li {
line-height: 20px;
}
li {
display: list-item;
text-align: -webkit-match-parent;
}
.c1 {
background-color:#98c6e9;
}
.c2 {
background-color:#4ba8ee;
}
.c3 {
background-color:#2199f4;
}
.c4 {
background-color:#268cd9;
}
.c5 {
background-color:#197ac2;
}
.c6 {
background-color:#056ab5;
}
.dtext {
color:black;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;
margin-top:2px;
}
</style>
</head><body>
<div id="container">
<div class="fixed">
<p class="kicker">Finances in Retirement Index <a ><span style="font-size:9px; color:#080808;">Whats this?</span></a></p>
<div class="clear"></div>
<ul class="breaks">
<li>
<div class="bar c1"></div>
<p class="dtext">20%</p>
</li>
<li>
<div class="bar c2"></div>
<p class="dtext">30%</p>
</li>
<li>
<div class="bar c3"></div>
<p class="dtext">40%</p>
</li>
<li>
<div class="bar c4"></div>
<p class="dtext">50%</p>
</li>
<li>
<div class="bar c5"></div>
<p class="dtext">60%</p>
</li>
<li>
<div class="bar c6"></div>
<p class="dtext">70%</p>
</li>
</ul>
</div>
</div>
<script src="js/d3.min.js"></script>
<script src="js/topojson.v1.min.js"></script>
<script>
d3.select(window).on("resize", throttle);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 6])
.on("zoom", move);
var width = document.getElementById('container').offsetWidth;
var height = width / 2;
var topo,projection,path,svg,g, img;
var graticule = d3.geo.graticule();
var tooltip = d3.select("#container").append("div").attr("class", "tooltip hidden");
setup(width,height);
function setup(width,height){
projection = d3.geo.mercator()
.translate([(width/2), (height/2)])
.scale( width / 2 / Math.PI);
path = d3.geo.path().projection(projection);
svg = d3.select("#container").append("svg")
.attr("width", width)
.attr("height", height)
.call(zoom)
.on("click", click)
.append("g");
g = svg.append("g");
/*img = g.append("svg:image")
.attr("xlink:href", "../img/animated/world-map-key.jpg")*/
/* .attr("x", "10")
*/
/*.attr("y","450")
.attr("width","204")
.attr("height","146")
.attr("x","10");*/
/*.attr("width", 200)
.attr("height", 146)*/
}
d3.json("data/world-4-topo-min.json", function(error, world) {
var countries = topojson.feature(world, world.objects.countries).features;
topo = countries;
draw(topo);
});
function draw(topo) {
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
g.append("path")
.datum({type: "LineString", coordinates: [[-180, 0], [-90, 0], [0, 0], [90, 0], [180, 0]]})
.attr("class", "equator")
.attr("d", path);
var country = g.selectAll(".country").data(topo);
country.enter().insert("path")
.attr("class", "country")
.attr("d", path)
.attr("idd", function(d,i) { return d.idd; })
.attr("title", function(d,i) { return d.properties.name; })
.attr("paragraph", function(d,i) { return d.properties.firi; })
.style("fill", function(d, i) { return d.properties.color; });
//offsets for tooltips
var offsetL = document.getElementById('container').offsetLeft+20;
var offsetT = document.getElementById('container').offsetTop+10;
//tooltips
country
.on("mousemove", function(d,i) {
var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );
tooltip.classed("hidden", false)
.attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
.html("<span1><b>"+d.properties.name+"</b></span1><br><span2>"+d.properties.firi+"</span2>");
})
.on("mouseout", function(d,i) {
tooltip.classed("hidden", true);
});
//EXAMPLE: adding some capitals from external CSV file
d3.csv("data/country-capitals.csv", function(err, capitals) {
capitals.forEach(function(i){
addpoint(i.CapitalLongitude, i.CapitalLatitude, i.CapitalName );
});
});
}
function redraw() {
width = document.getElementById('container').offsetWidth;
height = width / 2;
d3.select('svg').remove();
setup(width,height);
draw(topo);
}
function move() {
var t = d3.event.translate;
var s = d3.event.scale;
zscale = s;
var h = height/4;
t[0] = Math.min(
(width/height) * (s - 1),
Math.max( width * (1 - s), t[0] )
);
t[1] = Math.min(
h * (s - 1) + h * s,
Math.max(height * (1 - s) - h * s, t[1])
);
zoom.translate(t);
g.attr("transform", "translate(" + t + ")scale(" + s + ")");
//adjust the country hover stroke width based on zoom level
d3.selectAll(".country").style("stroke-width", 2.5 / s);
}
var throttleTimer;
function throttle() {
window.clearTimeout(throttleTimer);
throttleTimer = window.setTimeout(function() {
redraw();
}, 200);
}
//geo translation on mouse click in map
function click() {
var latlon = projection.invert(d3.mouse(this));
console.log(latlon);
}
//function to add points and text to the map (used in plotting capitals)
function addpoint(lat,lon,text) {
var margin = {top: 0, right: 0, bottom: 0, left: 2};
var gpoint = g.append("g").attr("class", "gpoint");
var x = projection([lat,lon])[0] ;
var y = projection([lat,lon])[1] ;
gpoint.append("svg:circle")
.attr("cx", x)
.attr("cy", y)
.attr("class","point")
.attr("r", 5)
.style("fill", "Purple");
//conditional in case a point has no associated text
/* if(text.length>0){
gpoint.append("text")
.attr("x", x+2)
.attr("y", y+2)
.attr("dy", -7)
.attr("text-anchor", "middle")
.style("fill",purple)
.attr("class","text")
.text(text);
}*/
}
</script>
</body>
</html>
.国家：悬停{
行程：#B3；
笔画宽度：3px；
}
span1{
字号：18px；
字体系列：Arial、Helvetica、无衬线字体；
}
span2{
字体大小：14px；
字体系列：Arial、Helvetica、无衬线字体；
}
.文本{
字体大小：14px；
文本转换：无；
字体系列：Arial、Helvetica、无衬线字体；
}
.点{
填充：2×2×2×2×2×2；
}
#容器{
边缘顶部：20px；
身高：85%；
溢出：隐藏；
背景：#e8e9e8；
宽度：100%；
}
分区固定{
位置：固定；
/*左：68.9%；
最高：61.8%*/
最高：61%；
右边距：10px；
右：0；
宽度：23%；
z指数：1；
不透明度：0.9；
}
/*@仅媒体屏幕和（-webkit最小设备像素比：2）和（最大设备宽度：667px）和（最小设备宽度：375px）和（方向：横向）{
}*/
@-moz文档url-前缀（）{
分区固定{
左：75.8%；
最高：62%；
}
}
/*@媒体屏幕和（最小设备宽度：1280px）和（最大设备宽度：1280px）{
分区固定{
最高：62%；
右边距：10px；
}
}*/
/*（1920x1080）全高清显示器*/
/*@媒体屏幕和（最小设备宽度：1680px）和（最大设备宽度：1920px）{*/
/*在此处插入样式*/
/*}*/
/*@媒体屏幕和（最小设备宽度：1024px）和（最大设备宽度：1024px）{*/
/*在此处插入样式*/
/*分区固定{
最高：74%；
右边距：16px；}
}*/
@仅媒体屏幕和（-webkit最小设备像素比：2）和（最大设备宽度：480px）和（最小设备宽度：320px）和（方向：纵向）{
分区固定{
最高：28.1%；
左：68.13%；
宽度：30%；
}
}
/*------iPhone 6------*/
/*肖像与风景*/
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和（-webkit最小设备像素比：2）{
分区固定{
最高：26.1%；
左：68.13%；
宽度：30%；
}
}
/*肖像画*/
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和（-webkit最小设备像素比：2）
和（方向：纵向）{
分区固定{
最高：26.1%；
左：68.13%；
宽度：30%；
}
}
/*景观*/
@仅媒体屏幕
和（最小设备宽度：375px）
和（最大设备宽度：667px）
和（-webkit最小设备像素比：2）
和（方向：景观）{
分区固定{
最高：77.1%；
左：68.13%；
宽度：30%；
}
.文本{
字体大小：10px；
}
}
/*------iPad3和iPad4------*/
/*肖像与风景*/
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（-webkit最小设备像素比：2）{
分区固定{
最高：32%；
右边距：16px；
}
}
/*肖像画*/
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（方向：纵向）
和（-webkit最小设备像素比：2）{
分区固定{
最高：32%；
右边距：16px；
}
}
/*景观*/
@仅媒体屏幕
和（最小设备宽度：768px）
和（最大设备宽度：1024px）
和（方向：景观）
和（-webkit最小设备像素比：2）{
分区固定{
最高：58%；
右边距：16px；
}
}
/*（1920x1080）全高清显示器*/
@媒体屏幕和屏幕（最小宽度：1920像素）{
/*在此处插入样式*/
分区固定{
最高：90%；
左：76%；
}
}
/*（1680x1050）WSXGA+显示器*/
@媒体屏幕和屏幕（最小宽度：1680px）{
/*在此处插入样式*/
}
/*（1440x900）WXGA+显示器*/
@介质屏幕和（混合宽度：1440px）{
/*在此处插入样式*/
分区固定{
最高：80%；
}
}
.隐藏{
显示：无；
}
分区工具提示{
颜色：#222；
背景#f0f1f2；
填充：.5em；
文本阴影：#f50 1px 0；
边界半径：2px；
盒影：0px 0px 2px 0px#A6；
不透明度：0.9；
位置：绝对位置；
z指数：2；
}
/*.什么{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
颜色：#808080；
左：75%；
}
.工具提示{
顶部：-80px；
左：20px；
颜色：#222；
背景#f0f1f2；
填充：.5em；
文本阴影：#f50 1px 0；
边界半径：2px；
盒影：0px 0px 2px 0px#A6；
位置：绝对位置；
z指数：2；
不透明度：0；
-webkit转换：不透明度0.5s；
-moz转换：不透明度0.5s；
-ms转换：不透明度0.5s；
-o-转变：不透明度0.5s；
过渡：不透明度0.5s；
}
.什么：悬停.工具提示{
不透明度：1；
}*/
.分划{
填充：无；
冲程：#bbb；
笔划宽度：0px；
笔画不透明度：.5；
}
.赤道{
行程：#f0f1f2；
笔画宽度：1px；
}
.踢者{
字体：15px；
颜色：黑色；
;
字体系列：Arial、Helvetica、无衬线字体；
边缘底部：2px；
}
.休息{
溢出：隐藏；
高度：30px；
保证金：0；
列表样式：无；
}
.李先生{
浮动：左；
高度：30px；
边距：0 1px 0；
位置：相对位置；
宽度：16%；
}
.休息.酒吧{
宽度：100%；
高度：10px；
位置：相对位置；
}
李{
线高：20px；
}
李{
显示：列表项；
文本对齐：-webkit匹配父项；
}
.c1{
背景色：#98c6e9；
}
.c2{
背景色：#4ba8ee；
}
.c3{
背景色：#2199f4；
}
.c4{
背景色：#268cd9；
}
.c5{
背景色：197ac2；
}
.c6{
背景色：#056ab5；
}
.dtext{
颜色：黑色；
字体大小：12px；
字体系列：Arial、Helvetica、无衬线字体；
边缘顶部：2倍；
}
退休指数中的财务状况这是什么？
-
20%
-
30%
-
40%
-
50%
function convertImgToBase64(url, callback, outputFormat){
var img = new Image();
img.crossOrigin = 'Anonymous';
img.onload = function(){
var canvas = document.createElement('CANVAS');
var ctx = canvas.getContext('2d');
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this,0,0);
var dataURL = canvas.toDataURL(outputFormat || 'image/png');
callback(dataURL);
canvas = null;
};
img.src = url;
}