如何在json数据文件中添加图像并使用D3.js在网页上使用它

时间:2015-10-15 08:42:00

标签: javascript json 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&nbsp;&nbsp;<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>

0 个答案:

没有答案