2

ここにある d3 サンプル カレンダーを適応させています: http://bl.ocks.org/4063318

ここに画像の説明を入力

カレンダーの各日がハイパーリンクされるようにしようとしています。

そのために、次のように、各 "rect" の周りにアンカー タグを追加しました。

var rect = svg.selectAll(".day")
  .data(function(d) { return d3.time.days(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
  .enter()
  .append("a")                                   //my new line of code
  .attr("xlink:href", "http://stackoverflow.com") //my new line of code
  .append("rect")
  .attr("class", "day")
  .attr("width", cellSize)
  .attr("height", cellSize)
  .attr("x", function(d) { return week(d) * cellSize; })
  .attr("y", function(d) { return day(d) * cellSize; })
  .datum(format);

これにより、各 rect がこの Web サイトにリンクされます。ただし、リンクはデータに依存する必要があります。したがって、上記の行の代わりに: 

  .attr("xlink:href", "http://stackoverflow.com") //my new line of code

私が使う： 

  .attr("class", "rectAnchor")

これを行うのは、rectAnchor を選択し、その rect の子にアクセスしてから、次のコードのように xlink:href 属性を設定できるようにするためです。

d3.csv("dji.csv", function(error, csv) {
  var data = d3.nest()
    .key(function(d) { return d.Date; })
    .rollup(function(d) { return (d[0].Close - d[0].Open) / d[0].Open; })
    .map(csv);

  rect.filter(function(d) { return d in data; })
      .attr("class", function(d) { return "day " + color(data[d]); })
      .attr("dyanmiclinktext", function(d) { return data[d]; })  //my new line of code
      .select("title")
      .text(function(d) { return d + ": " + percent(data[d]); });


  $(".rectAnchor")                                       //my new line
  .attr("xlink:href", function(){                             //my new line
     return "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("dynamiclinktext"); //my new line
  });

});

今、私がそうすると、ハイパーリンクが機能せず、別の2つの望ましくないことが起こります.1つ目は、アンカータグ内のリンクに、 href:"URL" ではなく xlink:href"URL" と表示されていることです。次に、行 .attr("xlink:href", function(){ を .attr("href", function(){ ) に変更しても、まだ機能しません。 svg は既にレンダリングされており、これらの新しく改善されたアンカー タグを使用して再レンダリングする必要がありますか?または、他に不足しているものがありますか?助けていただければ幸いです。ありがとう!

補遺:

   $(".rectAnchor").attr("xlink:href", "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("finer"));

生成:

<a class="rectAnchor" xlink:href="http:/127.0.0.1/subdir/undefined">
<rect class="day" width="17" height="17" x="170" y="51" finer="group1" fill="#aec7e8">
<title>2012-03-13: group1</title>
</rect>
</a>

(単に「href」ではなく、未定義と「xlink:href」に注意してください)

 $(".rectAnchor").attr("xlink:href", function(d) { return "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("finer");});

生成:

 <a class="rectAnchor" xlink:href="http:/127.0.0.1/subdir/group2">
 <rect class="day" width="17" height="17" x="153" y="34" finer="group2" fill="#aec7e8">
 <title>2012-03-05: group2</title>
 </rect>
 </a>

どちらも表示された svg でハイパーリンクされていません (つまり、マウス ポインターは違いを示さず、クリックしても何も起こりません)。また、2 つのケースで 'xlink:href' を 'href' に変更しました。これは上記と同じように出力されましたが、「xlink:」がありません。ただし、以前と同様に、ハイパーリンクはありませんでした。ありがとう。

4

1 に答える 1

2

を使用しているところは$(".rectAnchor")、d3 の世界ではなく、jQuery の世界にいます。

jQueryのattr()関数は、d3 のように関数では機能しませんattr()。

あなたは単に必要です：

$(".rectAnchor").attr(
  "xlink:href",
  "http:/127.0.0.1/subdir/" + $(this).children("rect").attr("dynamiclinktext")
);

他に問題がなければ、これでうまくいくはずです。

編集：

$(".rectAnchor")実際、複数の要素が生成されることに気付きませんでした。以前の試みと上記の私の提案のハイブリッドが必要です。

$(".rectAnchor").each(function(i, element) {
    var $el = $(element);// $(this) would work too
    $el.attr("xlink:href", "http://127.0.0.1/subdir/" + $el.children("rect").attr("dynamiclinktext"));
});

http:/127...実際に必要な場所があることに注意してくださいhttp://127....(つまり、スラッシュがありません)。

最後に、SVG 要素を<a>タグでラップすることで実際にリンクを作成できると確信していますか? そうかもしれませんが、試したことはありません。よくわからない場合は、手動で生成された SVG (つまり、javascript なし) を使用して、スタンドアロン テスト (たとえば、jsFiddle 内) として試してみてください。

于 2012-11-27T00:36:37.510 に答える