D3でフォントを使用すると、リンクがレンダリングされません

StackOverflow https://stackoverflow.com//questions/24003415

  •  20-12-2019
  •  | 
  •  

質問

現在ここで見つかったMike BostockのD3レイアウト例を使用してGithub Reposをグラフ化するアプリを構築しています。 http://mbostock.github.io/d3/talk/20111018/tree.html

SVGサークルの代わりにフォントアワイトームフォントをレンダリングしようとしていて、これが円をレンダリングしているコードであると思います：

nodeEnter.append("svg:circle")
  .attr("r", 1e-6)
  .style("fill", function(d) { return d._children ? "lightsteelblue" : "#fff"; });
.

私は似たような質問を使用しました。そのコードは、フォント素晴らしいアイコンを正常にレンダリングしましたが、今度はレンダリングされているがリンク可能なテキストは何らかの理由で隠されています。

ページにレンダリングされていますが表示されません

私はコードを操作しようとしましたが、テキストノードとリンクテキストの取得方法もレンダリングする方法を理解できません。

また、私はこの他のコードが私の後払いを妨げてこのエラーを引き起こす可能性があるという感覚を持っています。これは完全です：

nodeEnter.append("svg:a")
  // make the links open in a new page
  .attr("target", "_blank")

  .attr("xlink:href", function(d) { 
    console.log('d.name -->', d.name);
    // d.data.path "" + d.name
    var url = "https://" + URLtoArr[0] + "/" + URLtoArr[1] + "/" + URLtoArr[2] + "/" + "tree/master" + "/";
    // if path is set (if it is NOT the root node), add it on to the end
    if(d.data !== undefined) {
      url += d.data.path; 
    }
    return url; 
    // https://github.com/AndyLampert/repository-file-tree-generator/blob/master/public/css/main.css
  })

  .append("svg:text")
  .text(function(d) { return d.name; })
  .attr("x", function(d) { return d.children || d._children ? -10 : 10; })
  .attr("dy", ".35em")
  .attr("text-anchor", function(d) { return d.children || d._children ? "end" : "start"; })
  .style("fill-opacity", 1e-6);
.

最後に、ここにHerokuの私の現在の作業アプリがあります。 http://github-file-tree-generer.herokuapp.com/ < / P>

事前にありがとう！

役に立ちましたか？

解決

DOMからわかりやすいテキストからわかりやすいので、テキストアイコンが表示されていますが、ほぼ完全に透明である。

.style("fill-opacity", 1e-6);==技術的に隠されていないがほとんど見えない

いくつかの例では、クリック可能だが見えないコンテンツを作成するにはほぼゼロの不透明度を使用することをお勧めします（ただし、そのためのPointer-Eventプロパティを使用する必要があります）。あなたはそれを偶然にコピーしていなければなりません。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top