1

D3.jsのズーム可能なフォーカスとコンテキストグラフにクリップパスを設定しましたが、少し問題があります。http://nestoria.darkgreener.com/v2/

クリップパスは、フォーカスグラフの端からいくつかの円を切り取っています-上部と右側の円が半分しかないことがわかります！

ただし、コンテキストグラフをクリックしてドラッグするとわかるように、ズームではうまく機能します。

したがって、これらの円のエッジを切り落とさないクリップパスを作成する方法がわかりません。これは私のコードです：

focus.append("defs")
  .append("clipPath")
  .attr("id", "clip")
  .append("rect")
  .attr("width", width - 200)
  .attr("height", height);
var focus_dots = focus
  .selectAll(".dot")
  .data(mydata[j].data);
focus_dots.enter()
  .append("circle")
  .attr("clip-path", "url(#clip)");

何か案は？私はここで何をすべきかについて完全に困惑しているので、あなたの助けをいただければ幸いです！

4

3 に答える 3

2

ホバリング時にクリッピングを適用したくない場合は、次のような stylerule を使用できます。

circle:hover { clip-path: none; }

于 2012-10-08T15:26:51.683 に答える
1

私は同じ問題を抱えていて、それを回避しました

.attr("transform", "translate(0,-20)")
.attr("height", height+20)

アイデアは少しハックですが、単純にクリッピング ウィンドウを上に移動し、同じ量をその高さに追加すると、(上記の場合) 20px だけ上に表示されるはずです。(左側も同じです。右側と下側については、高さ/幅にピクセルを追加するだけです)。

于 2013-10-14T17:35:15.453 に答える
0

「変換」を使用しましたが、円は 4 分の 1 にカットされました。代わりに cx と cy を使用して、問題を解決してください。

于 2014-02-27T01:07:21.613 に答える