テキストボックスをD3で表示する方法

Question

次のコードは、その都市の円の上にマウスを置くと、都市名のテキストボックスを生成します。マウスオーバーの効果を削除し、地図が最初にロードされたときにそれを永久に保持するにはどうすればよいですか？ありがとうございました。

// Place Capital Cities the Map 
     svgContainer.selectAll("circle") 
      .data(capitalCities) 
      .enter().append("circle") 
      .attr("id", function(d, i) { return d.name.toLowerCase(); }) 
      .attr("cx", function(d, i) { return projectionType(d.coordinates)[0]; }) 
      .attr("cy", function(d, i) { return projectionType(d.coordinates)[1]; }) 
      .attr("r", "10") 
      .attr("stroke", "black") 
      .attr("stroke-width", "2px") 
      .style("fill", "#FFFF00") 
      .text("City Name:" + "<br />" + cityName); 


     // Mouse Over a City tells us the name 
     d3.selectAll("circle").on("mouseover", function() { 

      // Select the circle being moused over 
      circle = d3.select(this); 

      // Extract the name of the city from the bound data 
      cityName = circle.data()[0].name; 

      // Update and place the tooltip with the city name. 
      div.html("City Name:" + "<br />" + cityName) 
       .style("left", (d3.event.pageX + 9) + "px") 
       .style("top", (d3.event.pageY - 43) + "px") 
       .style("display", "inline"); 
     }) 

     // Mouse Out of a City removes the text 
     d3.selectAll("circle").on("mouseout", function() { 

      // Make the tooltip invisible 
      div.style("display", "none"); 

     }) 

     }); 

Answer 1

まず、「mouseout」イベントを削除してください。その後、divはマウスアウト時に消えません（関数をボタンなどの他のイベントにバインドすることもできます）。しかし、Timが示唆しているように、テキストがすべての都市（つまりmouseoverイベントではない）に永続的に残るようにするには、おそらくdivメソッドが必要なのではありません（div要素をたくさん必要としない限り）。

mouseoverイベントは、単一のdivを移動し、テキストを変更し、あなたが永続的に次の各「円」/都市にテキストをしたい場合は、テキスト要素は、おそらく少し簡単です：明らか

var text = svgContainer.selectAll("text") 
.data(circleData) 
.enter() 
.append("text"); 

var textLabels = text 
.attr("x", function(d) { return d.cityX; }) 
.attr("y", function(d) { return d.cityY; }) 
.text(function (d) { return "City Name:" + "<br />" + d.cityName }) 
.attr("font-family", "sans-serif") 
.attr("font-size", "20px") 
.attr("fill", "red"); 

変更これはあなたのデータ構造に合っていて、ラベルを上に移動するのではなく都市の隣に移動させるものです。