Question

在我头版的项目中，我必须显示美国地图与州。所以我在链接上找到了地图：http://bl.ocks.org/NPashaP/a74faf20b492ad377312。如果用户点击任何一个州，那么应该打开相应的页面。在这里，我只采取华盛顿州的例子。

代码：

（函数（）{ var uStatePaths = [ {ID： “WA”，N： “华盛顿” d：“M102.07324,7.6117734L106.43807,9.0667177L116.1377,11.814946L124.7057,13.754871L144.7516,19.412988L167.70739,25.071104L182.93051， 28.278277L169.29815,91.864088L156.85315,88.33877L141.34514,84.768091L126.11585,84.801329L125.66028,83.45663L120.06106,85.635923L115.46563,84.899179L113.31866,83.315125L112.00545,83.973101L107.26979， 83.832858L105.57143,82.483225L100.30839,80.370922L99.573419,80.51784L95.184297,78.993392L93.290999,80.810771L87.025093,80.512038L81.099395,76.386336L81.878352,75.453573L81.999575,67.776121L79.717576， 63.93642L75.602368,63.32938L74.924958,60.818764L72.649446,60.361832L69.094498,61.592408L66.831251,58.373161L67.154572,55.463272L69.9028,55.139951L71.519405,51.09844L68.932837,49.966816L69.094498， 46.248625L73.459331,45.601984L70.711103,42.853756L69.256158,35.740695L69.9028,32.830807L69.9028,24.909444L68.124535,21.676234L70.387782,12.299927L72.489368,12.784908L74.914275,15.694797L77.662503， 18.281364L80.895712,20.22129L85.422205,22.322876L88.49375 6,22.969518L91.403645,24.424462L94.798518,25.394425L97.061764,25.232765L97.061764,22.807857L98.355048,21.676234L100.45663,20.38295L100.77996,21.514574L101.10328,23.292839L98.840029,23.77782L98。 516708,25.879406L100.29497,27.334351L101.4266,29.759258L102.07324,31.699183L103.52818,31.537523L103.68984,30.244239L102.71988,28.950955L102.2349,25.717746L103.0432,23.939481L102.39656,22.484537L102。 39656,20.22129L104.17483,16.66476L103.0432,14.078192L100.61829,9.2283781L100.94162,8.4200758L102.07324,7.6117734ZM92.616548,13.590738L94.637312,13.429078L95.122294,14.803197L96.658073,13.186582L99。 002155,13.186582L99.810458,14.722361L98.274678,16.419801L98.92133,17.228114L98.193853,19.248875L96.819734,19.653021C96.819734,19.653021,95.930596,19.733857,95.930596,19.410536C95.930596,19.087215,97.385551,16.823958 ，97.385551,16.823958L95.688111,16.258141L95.36479,17.713095L94.637312,18.359737L93.10153,16.09648L92.616548,13.590738Z“}

];
var uStates={};

uStates.draw = function(id, data, toolTip){     
    function mouseOver(d){
        d3.select("#tooltip").transition().duration(200).style("opacity", .9);      

        d3.select("#tooltip").html(toolTip(d.n, data[d.id]))  
            .style("left", (d3.event.pageX) + "px")     
            .style("top", (d3.event.pageY - 28) + "px");
    }

    function mouseOut(){
        d3.select("#tooltip").transition().duration(500).style("opacity", 0);      
    }

    d3.select(id).selectAll(".state")
        .data(uStatePaths).enter().append("path").attr("class","state").attr("d",function(d){ return d.d;})
        .style("fill",function(d){ return data[d.id].color; })
        .on("mouseover", mouseOver).on("mouseout", mouseOut);
}
this.uStates=uStates;

}）（）;

Answer 1

试试这个：

d3.select(id).selectAll(".state-wrapper")
  .data(uStatePaths)
.enter()
  // Create an anchor tag per datum
  .append("a")
    .attr("class","state-wrapper")
    .attr('xlink:href', function(d) { return d.url })
    .on("mouseover", mouseOver).on("mouseout", mouseOut)
  // This appends a path inside each of the anchor tags:
  .append("path")
    .attr("class","state")
    .attr("d",function(d){ return d.d;})
    .style("fill",function(d){ return data[d.id].color; })

在美国的地图上我想添加到每个州的超链接

1 个答案: