11

ツリーマップにデータを表示する D3.js を使用してアプリを構築しています。理想的には、ツリー マップの各ノードに関する詳細情報を表示するためのツール ヒントをツリー マップに与えることです。ツリーマップには、.JSON ファイルからデータが供給されます。

現在、属性Poshy Tipを介してこの情報を渡すことができるjquery プラグインを使用しています。title=どうにかしてツリーマップの svg:g 要素に title 属性を追加する必要があることはわかっていますが、各ノードの title 属性を設定する場所がわかりません。

これが、すべての宣言などを行うスクリプトの始まりです...

<div id="chart"></div>
<script type="text/javascript">
var tree = d3.layout.tree()
.size([h, w - 160]);

var diagonal = d3.svg.diagonal()
.projection(function(d) { return [d.y, d.x]; });

var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h)
.append("svg:g")
.attr("transform", "translate(40,0)");

d3.json("test.json", function(json) {
  json.x0 = 800;
  json.y0 = 0;
  update(root = json);
});

これが私がposhytip()頭の中で使っている方法です

$(function(){
  $('node').poshytip({slide: false, followCursor: true, alignTo: 'cursor', 
    showTimeout: 0, hideTimeout: 0, alignX: 'center', alignY: 'inner-bottom',
    className: 'tip-twitter'});
}

インタラクティブなツリーマップの個々のアイテムを「マウスオーバー」して、ポップアップするツールチップを取得できるようにしたいだけですが、うまくいきませんでした。各アイテムに特定の ID を設定するにはどうすればよいですか?.JSON ファイルでそれを行うのですか? これを行う簡単な方法はありますか？私はこれについて間違った方法で行っていますか？どんな助けでも素晴らしいでしょう。

4

2 に答える 2

18 
var vis = d3.select("#chart").append("svg:svg")
.attr("width", w)
.attr("height", h);

var yourGElement = vis.append("svg:g").attr("transform", "translate(40,0)");

yourGElement.append("svg:title").text("Your tooltip info");
于 2012-07-26T19:53:03.580 に答える
5 
nodeEnter.append("svg:circle")
      .attr("r", 1e-6)
      .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; })
      .append("svg:title")
          .text(function(d){return "Name:"+d.Name+"\nAge:"+d.age;});

SVGtitle 属性を動的に追加します。円の上にマウスを移動すると、名前と年齢が小さなポップアップで表示されます。に名前、年齢を明記してtest.jsonください。

于 2013-08-22T04:11:00.130 に答える