0

d3 で円グラフを作成しており、ホバー時に特定のスライスの名前と値を表示したい:

@graph.append('path')
      .attr('d', @arc)
      .style('fill', (svg) => @color(svg.data.value))
      .attr('class', 'pie-slice')
      .on('mouseover', @pieSliceMouseOver)
      .on('mouseout', @pieSliceMouseOut)
      .append('text')
      .style('stroke', 'black')
      .append('textPath')
      .text((svg) -> "#{svg.data.name}: #{svg.data.value}")

これにより、次が出力されます（パイの1つのスライスに対して）

<path d="M-101.9924541587831,53.12757565208981A115,115 0 0,1 -2.1124459603436008e-14,-115L0,0Z" style="fill: #37823e;" class="pie-slice">
  <text style="stroke: #000000;">
    <textPath>401K: 82.28</textPath>
  </text>
</path>

しかし、テキスト自体は表示されません。Chrome でパス ノードを強調表示すると、ブラウザはスライスを正しく強調表示しますが、テキストに移動するとノードが表示されません。

mouseover および mouseout ハンドラーは設計どおりに機能しますが、テキストが表示されません。

4

1 に答える 1

0

title基本的なツールチップの場合、マウスオーバーでラベルを表示したい要素に要素を追加するだけです。ブラウザー自体がこの機能を提供するため、そのためのイベント ハンドラーを追加する必要さえありません。

より手の込んだものが必要な場合は、 tippyなどのサードパーティ ライブラリを使用できます(例はこちら)。

于 2013-03-22T18:12:41.927 に答える