如何在 D3.js 中显示触摸事件的文本？

Question

I have a map with areas on it where it displays text when the mouse hovers over it (using touchstart and touchend events). However, on my iPad the text does not display although the areas change color when I touch it. Anyone know how to make it display the text?

 function create_canada(canada) {
 var provinces = svg.append("g")
    .attr("class", "provinces")
 .selectAll("path")
 .data(topojson.object(canada, canada.objects.provinces).geometries)
 .enter().append("path")
 .attr("class", "province")
 .attr("d", path)
 .style("fill", function(d) {
   return "#"+Math.floor(Math.random()*16777215).toString(16);
  }) 
 .style("opacity","0.7")
 .on("touchstart", function(d) {
  colour = d3.select(this).style("fill");
  d3.select(this).style("fill", "red");
  }) // end mouseover
  .on("touchend", function(d) {
               d3.select(this).style("fill", function(d) {
                  return colour;
                }); // end mouseout
            }); // end var provinces
 provinces.append("svg:title") 
     .text(function(d) {
          return (d.id + " " + (get_Percapita(d)) + " per million"); // d.id is the Province name
          });

return provinces;

Answer 1

you should add a tspan in your text like this :

<text><tspan>My text</tspan></text>

and the touchstart or touchend action should work fine. See https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan