javascript - Can we add images in json data file and call it on page using D3.js -
below code displaying world map on page. i'm trying find way store image in json data file - , calling in tooltip function each country. tooltip function mapped json file , displaying data i've entered.
thanks
<!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 screen , (-webkit-min-device-pixel-ratio: 2) , (max-device-width: 667px) , (min-device-width: 375px) , (orientation: landscape) { }*/ @-moz-document url-prefix() { div .fixed { left:75.8%; top:62%; } } /* @media screen , (min-device-width: 1280px) , (max-device-width: 1280px) { div .fixed { top:62%; margin-right:10px; } }*/ /* (1920x1080) full hd display */ /*@media screen , (min-device-width: 1680px) , (max-device-width: 1920px) {*/ /* insert styles here */ /*}*/ /*@media screen , (min-device-width: 1024px) , (max-device-width: 1024px) {*/ /* insert styles here */ /*div .fixed { top: 74%; margin-right: 16px;} }*/ @media screen , (-webkit-min-device-pixel-ratio: 2) , (max-device-width: 480px) , (min-device-width: 320px) , (orientation: portrait) { div .fixed { top: 28.1%; left: 68.13%; width: 30%; } } /* ----------- iphone 6 ----------- */ /* portrait , landscape */ @media screen , (min-device-width: 375px) , (max-device-width: 667px) , (-webkit-min-device-pixel-ratio: 2) { div .fixed { top: 26.1%; left: 68.13%; width: 30%; } } /* portrait */ @media screen , (min-device-width: 375px) , (max-device-width: 667px) , (-webkit-min-device-pixel-ratio: 2) , (orientation: portrait) { div .fixed { top: 26.1%; left: 68.13%; width: 30%; } } /* landscape */ @media screen , (min-device-width: 375px) , (max-device-width: 667px) , (-webkit-min-device-pixel-ratio: 2) , (orientation: landscape) { div .fixed { top: 77.1%; left: 68.13%; width: 30%; } .text { font-size:10px; } } /* ----------- ipad 3 , 4 ----------- */ /* portrait , landscape */ @media screen , (min-device-width: 768px) , (max-device-width: 1024px) , (-webkit-min-device-pixel-ratio: 2) { div .fixed { top: 32%; margin-right: 16px; } } /* portrait */ @media screen , (min-device-width: 768px) , (max-device-width: 1024px) , (orientation: portrait) , (-webkit-min-device-pixel-ratio: 2) { div .fixed { top: 32%; margin-right: 16px; } } /* landscape */ @media screen , (min-device-width: 768px) , (max-device-width: 1024px) , (orientation: landscape) , (-webkit-min-device-pixel-ratio: 2) { div .fixed { top: 58%; margin-right: 16px; } } /* (1920x1080) full hd display */ @media screen , (min-width: 1920px) { /* insert styles here */ div .fixed { top:90%; left:76%; } } /* (1680x1050) wsxga+ display */ @media screen , (min-width: 1680px) { /* insert styles here */ } /* (1440x900) wxga+ display */ @media screen , (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 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 capitals 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 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 add points , text 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 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>
use data-uri, image data can described in string, i'm confused, why not use url? or data-uri image src, string larger in size
$('<img>').attr('src','data:image/gif;base64,r0lgodlheaaqamqaaorhhovskudfoulrsop3woydzu6qdvcchpgolfo0o/xbs/fnwfjz0frl3/zy7////waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaach5bakaabaalaaaaaaqabaaaavvicsozglcqaosj6mu7fiyzekqnktoqgdsm8hbadguxogaiqhsvp5qanqkgiguhwfuylcvdfcrkue1lbavavifidltimbkc5gm2hb0slbcbmqib0ujiqa7').appendto($('body'));.d1 { background: url(data:image/gif;base64,r0lgodlheaaqamqaaorhhovskudfoulrsop3woydzu6qdvcchpgolfo0o/xbs/fnwfjz0frl3/zy7////waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaach5bakaabaalaaaaaaqabaaaavvicsozglcqaosj6mu7fiyzekqnktoqgdsm8hbadguxogaiqhsvp5qanqkgiguhwfuylcvdfcrkue1lbavavifidltimbkc5gm2hb0slbcbmqib0ujiqa7) no-repeat left center; width:16px; height: 16px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="d1"></div> <img width="16" height="16" alt="star" src="data:image/gif;base64,r0lgodlheaaqamqaaorhhovskudfoulrsop3woydzu6qdvcchpgolfo0o/xbs/fnwfjz0frl3/zy7////waaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaach5bakaabaalaaaaaaqabaaaavvicsozglcqaosj6mu7fiyzekqnktoqgdsm8hbadguxogaiqhsvp5qanqkgiguhwfuylcvdfcrkue1lbavavifidltimbkc5gm2hb0slbcbmqib0ujiqa7" />
Comments
Post a Comment