0

ユーザーがデータの視覚化を進めているときに、物語のテキストの段落が Web ページの横にスクロールすることについて疑問に思っています。この一環として、そのテキストの特定の部分文字列に機能を追加するとよいでしょう。たとえば、関連するポップアップ イメージを開くことができます。しかし、マウスオーバーなどの演算子に応答できるように、テキスト要素の部分文字列をオブジェクト化するように 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 に答える