如何在悬停时引用d3js对象并单击

Question

我正在使用现有的代码：

https://plnkr.co/edit/e2kpAaMjTTzmXnE4ghGY?p=preview

<!DOCTYPE html>

<html>

<meta charset="utf-8">

<head>



<style>



.states {

  fill: none;

  stroke: #fff;

  stroke-linejoin: round;

}



 .county:hover {



    fill: red !important;

  }


svg:hover{

background: black;

}



</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<script src="https://d3js.org/d3.v3.min.js"></script>

<script src="https://d3js.org/queue.v1.min.js"></script>

<script src="https://d3js.org/topojson.v1.min.js"></script>

</head>

<body>

<div style="float:left,width:40%" id="click"></div>

 <!-- For Dropdown menu --> 

    <select onchange="Dropdown(this.value)">

      <option >Unemployeement</option>

      <option >Random</option>

    </select>

<script>

$("div").click(function(){

alert("here");

});

var width = 960,

    height = 500;



var color = d3.scale.threshold()

    .domain([0.02, 0.04, 0.06, 0.08, 0.10])

    .range(["#f2f0f7", "#dadaeb", "#bcbddc", "#9e9ac8", "#756bb1", "#54278f"]);



var path = d3.geo.path();



var svg = d3.select("div").append("svg")

    .attr("width", width)

    .attr("height", height);



queue()

    .defer(d3.json, "https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")

    .defer(d3.tsv, "unemployment.tsv")

    .await(ready);



function ready(error, us, unemployment) {

  if (error) throw error;



  var rateById = {};



  unemployment.forEach(function(d) { rateById[d.id] = +d.rate; });



  svg.append("g")

      .attr("class", "counties")

    .selectAll("path")

      .data(topojson.feature(us, us.objects.counties).features)

    .enter().append("path")

      .attr("d", path)

        .attr("class", "county")

      .style("fill", function(d) { return color(rateById[d.id]);

      });    

  svg.append("path")

      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a.id !== b.id; }))

      .attr("class", "states")

      .attr("d", path);

 var object=svg.append("foreignobject");

 var div=object.append("div");

 var tooltip=d3.select("div").append("span")

 .attr("class","ccc")

 .style("z-index", "10")

    .style("visibility", "hidden")

    .style("position", "absolute")   

    .style("text-align","center")     

    .style("width","60px")          

    .style("height", "28px")         

    .style("padding","2px")       

    .style("font","12px sans-serif")    

    .style("background","lightsteelblue") 

    .style("border","0px")    

    .style("border-radius","8px")     

    .style("pointer-events","none") 

 .text("here");



d3.select("div") 

  .on("mouseover", function(){return tooltip.style("visibility", "visible");})

  .on("mousemove", function(){return tooltip.style("top", (event.pageY-10)+"px").style("left",(event.pageX+10)+"px");})

  .on("mouseout", function(){return tooltip.style("visibility", "hidden");});  

 $("span").click(function(){

    alert("The paragraph was clicked.");

});

}

var dropdownMap = {
  'Unemployeement': 'unemployment.tsv',
  'Random': 'random.tsv'
}

function Dropdown(val){

  let file = dropdownMap[val];

  if(!file){
    file = 'unemployment.tsv'
  }

    queue()

    .defer(d3.json,"https://gist.githubusercontent.com/mbostock/4090846/raw/d534aba169207548a8a3d670c9c2cc719ff05c47/us.json")

    .defer(d3.tsv, file)

    .await(ready);

}

</script>

</body>



</html>

我正在尝试修复两个区域。 1.工具提示。 我已经能够将鼠标悬停在特定的县上，但是我不知道如何纠正我要悬停在哪个县。 在第186行中，我有.text("here"); 。 我需要将其设置为html .text("<div id='countyid'>text</div>" 。但是，标记显示为文本，并且我无法在id字段中引用县名。

2.点击。 在第74行，基于点击，我有一个警报。 我需要知道我要点击哪个县。 看来我缺少识别县名的内容。

我如何引用它们？ 谢谢。

Answer 1

我对d3.js并不熟悉，但是通过阅读一些文档和一些摆弄，我使您成为了一个新的Plunker 。

您正在将所有工具提示和click事件绑定到主div 。 我重新编写了您的代码，并将事件设置为在县的“路径”上触发。

现在，当您将鼠标悬停在每个县时，每个县都将显示其id ，工具提示具有您想要的标记（div的id是县的id 。我使用id代替单词“ text”作为div的内容）当您单击一个县时，它会提示它的id 。

那应该让您开始。

Answer 2

添加与绑定到面数据的SVG相关的mouseover和mouseclick处理程序，然后从那里使用工具提示定义。 请注意，您可以将悬停/单击的多边形传递给该回调。 不需要在tooltip上调用的text() 。 这是主要变化：

svg.append("g")
    .attr("class", "counties")
    .selectAll("path")
    .data(topojson.feature(us, us.objects.counties).features) // us has list of polygons
    .enter().append("path")
    .attr("d", path)
    .attr("class", "county")
    .style("fill", function(d) {
        return color(rateById[d.id]);
    }).on("mouseover", function(county) {
        // change tooltip content here
        tooltip.html("County ID " + county.id); 
    }).on("click", function(county) {
        // define your on-click reaction here
        alert("County ID clicked " + county.id); 
    });

工作代码在这里： https ： //plnkr.co/edit/qHHczyK57H2QzNG6eIik？p = preview

免责声明：我已对您的代码进行了最少的更改集（为了便于阅读，还删除了空行）以解决您的问题。 您的代码可能暴露的任何其他问题均保持不变。

（PS：我应该在休息之前发布部分答案；）

如何在悬停时引用d3js对象并单击

问题描述

2 个解决方案

解决方案1
0 2018-01-23 18:15:59

解决方案2
0 2018-01-23 21:05:37

如何在悬停时引用d3js对象并单击

问题描述

2 个解决方案

解决方案1 0 2018-01-23 18:15:59

解决方案2 0 2018-01-23 21:05:37

解决方案1
0 2018-01-23 18:15:59

解决方案2
0 2018-01-23 21:05:37