我们可以在json数据文件中添加图像，并使用D3.js在页面上调用它
Can we add images in json data file and call it on page using D3.js
下面是我在页面上显示世界地图的代码。我试图找到在json数据文件中存储图像的方法-并在每个国家的工具提示函数中调用它。工具提示函数当前映射到json文件并显示我输入的数据。
感谢<!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>
使用data-uri，图像数据可以在字符串中描述，我很困惑，为什么不使用url?或者data-uri image src, string的大小更大
$('<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" />您可以将图像转换为base64字符串并将该字符串添加到JSON文件
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;
}
这里有一个JSFIDDLE
相关文章：
- 如何在d3.js中返回路径的y坐标
- 有条件更新d3.js力图中节点的最佳方法
- 使用D3.js计算带有字母间距的文本长度
- D3.js模式不适用于弧形或圆环图
- d3.js Chord图的动态工具提示
- 在D3.js中，有没有任何方法可以将x和y方向上的滚动事件绑定到平移svg
- HTML5FileReader输出到D3.js图表
- D3.js生成有效的SVG，但不显示任何内容
- d3.js:限制画笔的大小
- d3.js用按钮更新条形图工具提示
- 如何为d3.js图表输出组织/嵌套数据
- d3-js快速事件调用问题
- D3.JS向rect添加缩放和列表项
- d3.js圆的半径是否可以由样式属性指定
- 如何在d3.js中自定义事件侦听器
- 在新窗口上使用d3.js
- 如何用d3.js绘制折线图
- 使用dc.js、d3.js和crossfilter引用错误
- D3.js剪辑路径截断了我的图的边缘
- D3.js和坐标系
