0

皆さん-

Mike Bostock の「Mobile Patent Suits」に基づいて、Viz にツールチップを追加しようとしています。

http://bl.ocks.org/mbostock/1153292

以下からオブジェクトを拡張しました。

{ソース:「ノキア」、ターゲット:「クアルコム」、タイプ:「スーツ」}

{source: "Nokia", target: "Qualcomm", type: "suit", tooltip: "my comment here"} へ

https://gist.github.com/milroc/2975255 d3 ヘルパー ツールチップ JS をスクリプトに追加しました

ツールチップ オブジェクトを作成しました:

var tooltip = d3.select("body")
.append("div")
.style("position", "absolute")
.style("z-index", "70")
.style("visibility", "hidden");

そしてそれを呼んだ：

var circle = svg.append("svg:g").selectAll("circle")
  .data(force.nodes())
  .enter().append("svg:circle")
  .call(d3.helper.tooltip(function(d,i){return d.name;}))
  .attr("r", 6)
  .call(force.drag);

これは正常に動作しますが、次のように変更すると:

  .call(d3.helper.tooltip(function(d,i){return d.tooltip;}))

「未定義」になります。以前にd3オブジェクトにプロパティを追加し、ツリー図を使用してツールチップとして呼び出すことができました。ここで別の方法で何をする必要があるのか​​ わかりません。

ありがとう、

ラルフ

編集：

（まずラースに感謝！）

ツールチップの 2 番目のセットを追加しようとしていますが、「ノード」ではなくオブジェクト「リンク」の構造のように見えます。円をロールオーバーすると、「ソース」または「ターゲット」の「nameLabel」ツールチップが生成されるかどうかが問題になります。 '

拡張オブジェクト:

{source: "First", target: "Second", type: "dependency", tooltip: "tip for rollover of path", nameLabel: "tip for rollover of circle"}

作業パスのツールチップ:

var path = svg.append("svg:g").selectAll("path")
.data(force.links())
.enter().append("svg:path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; })
.call(d3.helper.tooltip(function(d,i){return d.tooltip;}));

危険な円のツールチップ:

var circle = svg.append("svg:g").selectAll("circle")
.data(force.nodes())
.enter().append("svg:circle")
.call(d3.helper.tooltip(function(d,i){return d.nameLabel;}))
.attr("r", 12)
.call(force.drag);

これが機能するため、ツールチップは円を認識します。

.call(d3.helper.tooltip(function(d,i){return d.name;}))

だから私は名前を渡すことができると思った関数を構築しました：

function whatTip(theName) {
var fullArray = new Array;
var fullArray = (("FIRST","first tooltip"),("SECOND","second tooltip"),("THIRD","THIRD tooltip"),("FIFTH","FIFTH tooltip"),("SIXTH","sixth tooltip"),("FOURTH","FOURTH tooltip") );
for(var i=0;i<fullArray.length;i++){
if (fullArray[i][0] == theName) {
return fullArray[i][1];
}}}
4

2 に答える 2

0

ノードを計算するときにも属性を追加する必要があります。リンク先の例と同じコードを使用していると仮定すると、変更する必要があります

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
});

に

links.forEach(function(link) {
  link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, tooltip: link.tooltip});
  link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, tooltip: link.tooltip});
});
于 2013-04-23T17:26:58.633 に答える
0

さて、私はそれを理解しました：

私が最終的に行ったことは、sourceTip と destTip の 2 つの属性を追加することです (一部のノードは宛先のみであるため)。

{source: "Forms", target: "AO/TOA", type: "dependency", tooltip: "Forms tooltip here", sourceTip: "Forms tip", destTip: "AO/TOA tip"},

次に、ノードを作成しました。

var mylinks = links.forEach(function(link){
link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, tooltip: link.tooltip, nameTip: link.sourceTip});
link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, tooltip: link.tooltip, nameTip: link.destTip});
});

唯一のトリックは、属性「nameTip」をソースとターゲットのそれぞれに sourceTip/destTip に設定することです。

つまり、nameTip 属性を使用してツールチップから呼び出すことができます。

.append("svg:circle")
         .call(d3.helper.tooltip()
            .attr({class: function(d, i) { return d + ' ' +  i + ' A'; }})
            .style({color: '#a1d373'})
            .text(function(d, i){ return d.nameTip; })
        )
于 2013-05-16T20:11:06.990 に答える