Question

我正在试图想出一种方法，在每个svg上都有一个工具提示，并弹出“text”属性。我正在使用https://github.com/VACLab/d3-tip工具提示API。有没有办法通过函数调用svg的属性？

  <html lang="en">
  <script src="https://d3js.org/d3.v3.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<body>
  <script type="text/javascript">

  //Create SVG element
  var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 50);

  var d3tip = d3.tip()
  .attr('class', 'd3tip')
  .html(function(d){
    return d.text;
  });

  svg.call(d3tip);

  svg.append("g")
  .append("circle")
  .attr("cx", 10)
  .attr("cy", 10)
  .attr("r", 10)
  .attr("text", "hi")
  .on('mouseover', d3tip.show)
  .on('mouseout', d3tip.hide);


  </script>

</body>
</html>

所以我希望这个代码在屏幕上有一个svg，当有人在这个形状上盘旋时，它会弹出它的“text”属性，现在是“hi”。但是这段代码告诉我Uncaught TypeError：无法读取undefined的属性'text'。我该如何解决这个问题？

d3工具提示调用svg属性

0 个答案: