Question

png representation of svg circlet

所以我有这个圆圈，我想让文字可点击（3个不同的可点击区域）。正在通过raphael.js或d3.js实现这一目标的唯一方法是什么？这样的事情通常非常耗时吗？如果我想让其他人在上班时做这件事，我甚至不确定预算需要多少小时。大多数情况下，我想学习如何做到这一点。

Answer 1

使用d3会是这样的：

d3
  .select("svg#svgId")
  .selectAll("text")
  .classed("cursor-pointer", true)
  .on("click", function(){
    var txt = d3.event.target.textContent;;
    var redirectUrl = false;
    switch(txt) {
      case "DESIGNERS:
        redirectUrl = "https://www.example.com";
        break;
      // ... so on
    }
    if (redirectUrl !== false){
      window.location.href = redirectUrl;
    }
  });

在css规则中：

.cursor-pointer {
  cursor: pointer;  
}

查看此示例：

d3
  .select("svg#mySVG")
  .selectAll("text")
  .classed("cursor-pointer", true)
  .on("click", function() {
    var txt = d3.event.target.textContent;
    alert("Redirect to: " + txt);
  });

.cursor-pointer {
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<svg id="mySVG" xmlns="http://www.w3.org/2000/svg" width="500" height="40" viewBox="0 0 500 40">

  <text x="0" y="35" font-family="Verdana" font-size="35">
    Hello,
  </text>
  <text x="100" y="35" font-family="Verdana" font-size="35">
    out there
  </text>
</svg>

将可点击区域添加到svg

1 个答案: