0

我想知道当用户正在通过数据可视化进行时，让叙述性文本段落向下滚动网页的一侧。作为其中的一部分，最好为该文本的某些子字符串添加功能，例如打开与之相关的弹出图像。但是我想不出任何方法来告诉 D3 对象化文本元素的子字符串，以便它们可以响应鼠标悬停之类的运算符。

这是一个例子，加上jfiddle

<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
    <title>Substring click</title>
    <script type="text/javascript" src="scripts/d3.v3.js"></script>
</head>
<body>
<!-- example line -->
<p>The most interesting <A href="https://en.wikipedia.org/wiki/The_Most_Interesting_Man_in_the_World">man</A> in the world</p>
<div/>

<script type="text/javascript">

var link = "https://en.wikipedia.org/wiki/The_Most_Interesting_Man_in_the_World";

d3.select("body").selectAll("div").append("text").text("The most interesting man in the world");

// is there any way to make 'man' link to 'wiki_link' or perform some other operation?

</script>
</body>
</html>
4

1 回答 1

1

是的，这是可能的，尽管您需要以适合d3.

演示

var data = [{ text: 'The most interesting ', href: false },
            { text: 'man', href: 'https://en.wikipedia.org/wiki/The_Most_Interesting_Man_in_the_World' },
            { text: ' in the world', href: false}];

var text = d3.select("body").selectAll("div").append("text");

text.selectAll('tspan')
  .data(data)
  .enter()
  .append('tspan')
  .html(function (d) { 
     return d.href 
       ? '<a href=' + encodeURI(d.href) + '>' + d.text + '</a>' 
       : d.text; 
   });
于 2013-11-10T10:41:43.680 回答