2

この例を拡張しています http://bl.ocks.org/tommyskg/6111032

私はそれをクリックするたびにポイントするツールチップを追加することに取り組んでいます:私はd3.JSを使用してい
ます

      // Add a circle.
      marker.append("svg:circle")
                        .attr("r", 4.5)
                        .attr("cx", padding)
                        .attr("cy", padding)
                        .on("click",info)


     function info(){
        d3.select(this).tipsy({live: true});
      };

しかし、私はこのエラーが発生しています: Uncaught TypeError: Object [object Array] has no method 'tipy'

JQueryを2回使用しているようです

この競合をどのようにカットできますか?

2 番目の方法:

ツールチップがマップの後ろに隠れている可能性があるため、マップに問題があると思います。表示時のツールチップの位置を相対的にしました。私はそれを手動でコーディングしました。

div.tooltip {
  color: #222; 
  background: #fff; 
  padding: .5em; 
  text-shadow: #f5f5f5 0 1px 0;
  border-radius: 2px; 
  box-shadow: 0px 0px 2px 0px #a6a6a6; 
  opacity: 0.9; 
  position: relative;
}

var tooltip = d3.select("#map").append("div")

  function info(){
            tooltip.attr("class", "tooltip");
          };

     marker.append("svg:circle")
                            .attr("r", 4.5)
                            .attr("cx", padding)
                            .attr("cy", padding)
                            .on("click",info)

しかし、私は結果に到達できませんでしたか？この問題を解決するためのアイデアはありますか?

4

1 に答える 1

0

問題1

tipsyはプラグインであるため、関数にアクセスするには、DOM 要素を(選択ではなく) オブジェクトjQueryとしてラップする必要があります。jQueryd3tipsy

function info () { $(this).tipsy({live: true}); }

問題 2

div要素に a を追加していると思われますsvg。それは許されません。

また、ツールチップは問題なく表示されるはずです: http://bl.ocks.org/ilyabo/1373263

于 2013-12-03T15:00:19.303 に答える