1

http://nvd3.org/ghpages/scatter.html

それぞれの小さなデータ (円) をクリック可能なリンクにしたいと考えています。私の本当の意図は、各データポイントにモーダル ウィンドウ ポップアップを持たせることですが、今のところ、私は初心者なので簡単にするためにリンクから始めます。

このリンクを見つけました d3.jsオブジェクトのハイパーリンク

コードを変更しようとしました。

これが私のデータセットです。ご覧のとおり、キー/要素（どちらであるかはわかりません）「url」を追加し、リンクを指定しました。

var data = [{key: 'Group1', values: [{x: 1, y: 1, url:"https:google.com"}, {x: -2, y: 3}, {x: 4, y: -9}]},
            {key: 'Group2', values: [{x: 2, y: 0}, {x: -4, y: -4}, {x: 1, y: 8}]}];

  return data;

次に、最初のリンクに従って、これをコードのhtmlに貼り付けました

nodeEnter.append("svg:a")
  .attr("xlink:href", function(d){return d.url;})  // <-- reading the new "url" property
.append("svg:rect")
  .attr("y", -barHeight / 2)
  .attr("height", barHeight)
  .attr("width", barWidth)
  .style("fill", color)
  .on("click", click);  // <- remove this if you like

しかし、それは機能していません.nvd3が純粋なd3コードと互換性がないためだと思います. これを行うために必要なコードの例を教えてくれる人はいますか?

4

2 に答える 2

1

nvd3 散布図のソース コードを読むと、設定できるパラメータが複数あることがわかりますが、このパラメータはありません。

Nvd3 は、再利用可能なチャートを提供するライブラリです。つまり、多数の機能を提供しますが、可能な限り多くの機能を備えようとしても、何が公開されているか、公開されていないかによって、いくつかの制限があります。nvd3 散布図を呼び出すときにそれを直接制御できないため、コードで何をしようとしても機能しません。

ただし、良いニュースがあります。Nvd3 はオープン ソースであるため、必要に応じて scatter.js のソースを変更できます。

于 2013-03-26T16:06:49.623 に答える
0

ソース コードを見て、pointer-events 行にコメントを付けることができます。

div.tooltip {
  position: absolute;   
  text-align: center;   
  width: 60px;  
  height: 28px;     
  padding: 2px; 
  font: 12px sans-serif;    
  background: lightsteelblue;   
  border: 0px;                  
  border-radius: 8px;
 /*  pointer-events: none;  This line needs to be removed */

}

詳細については、このリンクを参照してください。

于 2015-06-23T16:38:45.083 に答える