Javascript 如何从D3阵列抓取图像并通过d.properties访问？_Javascript_Html_Arrays_D3.js

Javascript 如何从D3阵列抓取图像并通过d.properties访问？

javascript html arrays d3.js

Javascript 如何从D3阵列抓取图像并通过d.properties访问？,javascript,html,arrays,d3.js,Javascript,Html,Arrays,D3.js,我正在尝试将照片添加到我的D3JavaScript数组中，以便稍后我可以使用D3.properties在将鼠标悬停在特定国家时显示照片。目前，我正在通过执行d.properties.rank和d.properties.name访问名称和列组，但我想向数组中添加一个字段标志：然后也访问d.properties.flag 这是我的数组，我尝试添加它，就像我在html中一样，通过做flag：但这不起作用，我尝试使用html链接、直接链接和照片/论坛链接，但我发现没有任何效果 var data2 = [

我正在尝试将照片添加到我的D3JavaScript数组中，以便稍后我可以使用D3.properties在将鼠标悬停在特定国家时显示照片。目前，我正在通过执行d.properties.rank和d.properties.name访问名称和列组，但我想向数组中添加一个字段标志：然后也访问d.properties.flag

这是我的数组，我尝试添加它，就像我在html中一样，通过做flag：但这不起作用，我尝试使用html链接、直接链接和照片/论坛链接，但我发现没有任何效果

var data2 = [{name:"United Kingdom", country_code: 826, rank: 1},{name:"United States", country_code: 840, rank: 2},{name:"Sweden", country_code: 752, rank: 3},
{name:"Canada", country_code: 124, rank: 4},{name:"Germany", country_code: 276, rank: 5},{name:"South Korea", country_code: 410, rank: 6},
{name:"Australia", country_code: 036, rank: 7},{name:"Italy", country_code: 380, rank: 8},
{name:"Ireland", country_code: 372, rank: 9},{name:"Jamaica", country_code: 388, rank: 10},
{name:"India", country_code: 356, rank: 11},{name:"Mexico", country_code: 484, rank: 12},{name:"France", country_code: 250, rank: 13},
{name:" Japan", country_code: 392, rank: 14},{name:"Finland", country_code: 246, rank: 15},
{name:"Spain", country_code: 724, rank: 16},{name:"Russia", country_code: 643, rank: 17},
{name:"Philippines", country_code: 608, rank: 18},{name:"Romania", country_code: 642, rank: 19},

这是我访问数组数据的代码

country
    .on("mousemove", function(d,i) {
      var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );

             if (d.properties.color) {
              tooltip.classed("hidden", false)
             .attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
             .html(d.properties.name + " " + "Rank" + " " + d.properties.color);
             }
             else {
              tooltip.classed("hidden", false)
             .attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
             .html(d.properties.name); 
             }
      })
      .on("mouseout",  function(d,i) {
        tooltip.classed("hidden", true);
      });

也许这是不可能的，但我想是的

多谢各位

完整代码

<!DOCTYPE html>
<meta charset="utf-8">
<title>D3 World Map Template | TechSlides</title>
<link rel="stylesheet" type="text/css" href="css/terryCSS.css">
</head>
<body>
<h1>Top 20 Countries with the most popular music</h1>
<div id="container"></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, 9])
    .on("zoom", move);


var width = document.getElementById('container').offsetWidth;
var height = width / 2;

var topo,projection,path,svg,g;

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");

}

d3.json("data/world-topo-min.json", function(error, world) {

  var countries = topojson.feature(world, world.objects.countries).features;

  topo = countries;
  draw(topo);

});




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", 1.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);
}


  //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("class","text")
          .text(text);
  }

}

var data2 = [{name:"United Kingdom", country_code: 826, rank: 1},{name:"United States", country_code: 840, rank: 2},{name:"Sweden", country_code: 752, rank: 3},
{name:"Canada", country_code: 124, rank: 4},{name:"Germany", country_code: 276, rank: 5},{name:"South Korea", country_code: 410, rank: 6},
{name:"Australia", country_code: 036, rank: 7},{name:"Italy", country_code: 380, rank: 8},
{name:"Ireland", country_code: 372, rank: 9},{name:"Jamaica", country_code: 388, rank: 10},
{name:"India", country_code: 356, rank: 11},{name:"Mexico", country_code: 484, rank: 12},{name:"France", country_code: 250, rank: 13},
{name:" Japan", country_code: 392, rank: 14},{name:"Finland", country_code: 246, rank: 15},
{name:"Spain", country_code: 724, rank: 16},{name:"Russia", country_code: 643, rank: 17},
{name:"Philippines", country_code: 608, rank: 18},{name:"Romania", country_code: 642, rank: 19},
{name:"Ukraine", country_code: 804, rank: 20}];

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);


    d3.json("world-map.json", function(json) {
                //Merge the rank in data2 and GeoJSON in a single array
                //Loop through once for each "rank" data value
                for (var i = 0; i < data2.length; i++) {
                    //Grab country name
                    var data2CountryCode = data2[i].country_code;
                    //Grab data value, and convert from string to float
                    var datarank = +data2[i].rank;
                    //Find the corresponding country inside the GeoJSON
                    for (var j = 0; j < json.features.length; j++) {

                        //We'll check the official ISO country code
                        var jsonCountryCode = json.features[j].properties.un_a3;

                        if (data2CountryCode == jsonCountryCode) {
                            //Copy the data2 rank value into the GeoJSON, with the name "color"
                            json.features[j].properties.color = datarank;
                            //Stop looking through the JSON
                            break;

                        }
                    }
                }

var color = d3.scale.quantize()
            .range(["Lime","GreenYellow","LawnGreen","LightGreen","LimeGreen","Green","DarkGreen","Yellow","Gold",
            "GoldenRod","DarkGoldenRod","Orange"    
,"DarkOrange","Coral","Red","OrangeRed","Tomato","Crimson","DarkRed","Brown"])
.domain([(d3.min(data2, function(d) { return d.rank; })),(d3.max(data2, function(d) { return d.rank; }))
]); 
         var country = g.selectAll(".country")
                   .data(json.features) //in my example, json.features
                   .enter()
                   .append("path")
                   .on("click", function(d,i){
                    console.log("Population for " + d.properties.name + " is " + d.properties.pop_est + " as of " + d.properties.lastcensus)
                    })
                   .attr("d", path)
                   .style("fill", function(d) {

                        //Get data value
                        var value = d.properties.color;
                        if (value) {
                            //If value exists…
                            return color(value);
                        } else {
                            //do nothing, leave country as is
                        }

      });


  //offsets for tooltips
  var offsetL = document.getElementById('container').offsetLeft+20;
  var offsetT = document.getElementById('container').offsetTop+10;

  //tooltips
  //modified to display rank of country, if it has one, if not, doesnt display any rank
  country
    .on("mousemove", function(d,i) {
      var mouse = d3.mouse(svg.node()).map( function(d) { return parseInt(d); } );

             if (d.properties.color) {
              tooltip.classed("hidden", false)
             .attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
             .html(d.properties.name + " " + "Rank" + " " + d.properties.color);
             }
             else {
              tooltip.classed("hidden", false)
             .attr("style", "left:"+(mouse[0]+offsetL)+"px;top:"+(mouse[1]+offsetT)+"px")
             .html(d.properties.name); 
             }
      })
      .on("mouseout",  function(d,i) {
        tooltip.classed("hidden", true);
      }); 
});
}

</script>
<p id="legend"><img src="images/legend.png" alt="Legend"></p>
</body>
</html>


D3世界地图模板|技术幻灯片
音乐最受欢迎的20个国家
d3.选择（窗口）。打开（“调整大小”，节气门）；
var zoom=d3.behavior.zoom（）
.scaleExtent（[1,9]）
。打开（“缩放”，移动）；
var width=document.getElementById（'container'）.offsetWidth；
变量高度=宽度/2；
var-topo、投影、路径、svg、g；
var graticule=d3.geo.graticule（）；
var tooltip=d3.select（#container”）.append（“div”）.attr（“class”，“tooltip hidden”）；
设置（宽度、高度）；
功能设置（宽度、高度）{
投影=d3.geo.mercator（）
.translate（[（宽度/2），（高度/2）]）
.比例（宽度/2/数学PI）；
path=d3.geo.path（）.projection（projection）；
svg=d3。选择（#容器”）。追加（“svg”）
.attr（“宽度”，宽度）
.attr（“高度”，高度）
.呼叫（缩放）
.on（“单击”，单击）
.附加（“g”）；
g=svg.append（“g”）；
}
d3.json（“data/world-topo-min.json”，函数（error，world）{
var countries=topojson.feature（world，world.objects.countries）.features；
topo=国家；
绘制（地形图）；
});
函数重画（）{
宽度=document.getElementById（'container'）.offsetWidth；
高度=宽度/2；
d3.选择（'svg'）.remove（）；
设置（宽度、高度）；
绘制（地形图）；
}
函数move（）{
var t=d3.event.translate；
var s=d3.event.scale；
zscale=s；
var h=高度/4；
t[0]=Math.min(
（宽度/高度）*（s-1），
数学最大值（宽度*（1-s），t[0]）
);
t[1]=Math.min(
h*（s-1）+h*s，
数学最大值（高度*（1-s）-h*s，t[1]）
);
缩放、平移（t）；
g、 attr（“变换”、“平移”（+t+））比例（+s+））；
//根据缩放级别调整国家/地区悬停笔划宽度
d3.选择所有（“.country”）.样式（“笔划宽度”，1.5/s）；
}
var节流分子；
功能节流阀（）{
clearTimeout（throttleTimer）；
throttleTimer=window.setTimeout（函数（）{
重画（）；
}, 200);
}
//在地图中单击鼠标进行地理转换
函数单击（）{
var-latlon=projection.invert（d3.mouse（this））；
控制台日志（latlon）；
}
//如果点没有关联的文本，则为条件
如果（文本长度>0）{
gpoint.append（“文本”）
.attr（“x”，x+2）
.attr（“y”，y+2）
.attr（“类”、“文本”）
.文本（文本）；
}
}
var data2=[{姓名：“联合王国”，国家代码：826，排名：1}，{姓名：“美国”，国家代码：840，排名：2}，{姓名：“瑞典”，国家代码：752，排名：3}，
{姓名：“加拿大”，国家代码：124，排名：4}，{姓名：“德国”，国家代码：276，排名：5}，{姓名：“韩国”，国家代码：410，排名：6}，
{姓名：“澳大利亚”，国家代码：036，排名：7}，{姓名：“意大利”，国家代码：380，排名：8}，
{姓名：“爱尔兰”，国家代码：372，排名：9}，{姓名：“牙买加”，国家代码：388，排名：10}，
{姓名：“印度”，国家代码：356，排名：11}，{姓名：“墨西哥”，国家代码：484，排名：12}，{姓名：“法国”，国家代码：250，排名：13}，
{姓名：“日本”，国家代码：392，排名：14}，{姓名：“芬兰”，国家代码：246，排名：15}，
{姓名：“西班牙”，国家代码：724，排名：16}，{姓名：“俄罗斯”，国家代码：643，排名：17}，
{姓名：“菲律宾”，国家代码：608，排名：18}，{姓名：“罗马尼亚”，国家代码：642，排名：19}，
{姓名：“乌克兰”，国家代码：804，级别：20}]；
功能图（topo）{
追加（“路径”）
.基准面（分划）
.attr（“类别”、“分划”）
.attr（“d”，路径）；
g、 附加（“路径”）
.datum（{type:“LineString”，坐标：[-180,0]，-90,0]，[0,0]，[90,0]，[180,0]}）
.attr（“类”、“赤道”）
.attr（“d”，路径）；
d3.json（“world map.json”，函数（json）{
//将data2中的列组和GeoJSON合并到单个数组中
//对每个“秩”数据值循环一次
对于（变量i=0；i