D3에서 폰트를 사용할 때 링크가 렌더링되지 않습니다
-
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-generator.herokuapp.com/ <. / P>
미리 감사드립니다!
해결책
DOM에서 텍스트를 선택하지 못하면서 텍스트 아이콘이 표시되므로 거의 완전히 투명합니다.
.style("fill-opacity", 1e-6);
== 기술적으로 숨겨져 있지는 않지만 거의 보이지 않음
일부 예제는 거의 0 불투명도를 사용하여 클릭 가능하지만 보이지 않는 콘텐츠를 작성하는 것이 좋습니다 (해당 포인터 - 이벤트 속성을 실제로 사용해야합니다).사고로 복사해야합니다.
제휴하지 않습니다 StackOverflow