如何在懸停時引用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