时间戳

首页 > 解决方案 > 如何在 D3.js 中显示触摸事件的文本？

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

问题描述

我有一个带有区域的地图，当鼠标悬停在它上面时它会显示文本（使用 touchstart 和 touchend 事件）。但是，在我的 iPad 上，虽然当我触摸它时区域会改变颜色，但文本不会显示。有谁知道如何让它显示文本？

 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;

标签： javascriptiosd3.js

解决方案

你应该像这样在你的文本中添加一个tspan ：

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

并且touchstartortouchend动作应该可以正常工作。请参阅https://developer.mozilla.org/en-US/docs/Web/SVG/Element/tspan

推荐阅读