javascript - FontAwesome 아이콘을 D3 그래프에 추가하기




d3.js font-awesome (4)

나는 정말 d3에 익숙하지 만, 글꼴 속성은 <i> 요소에 스타일을 지정하여 멋지게 작동합니다.

내가 찾은 유일한 방법은 foreignObject 를 추가하고 글꼴에 필요한 적절한 HTML을 설정하는 것입니다.

참고:

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/foreignObject?redirectlocale=en-US&redirectslug=SVG%2FElement%2FforeignObject

http://fortawesome.github.io/Font-Awesome/examples/

암호:

g.append('svg:foreignObject')
    .attr("width", 100)
    .attr("height", 100)
    .append("xhtml:body")
    .html('<i class="icon-fixed-width icon-user"></i>');

데모 : http://jsbin.com/eFAZABe/3/

D3 노드의 텍스트 대신 FontAwesome 사용하여 아이콘을 설정하려고합니다. 이것은 텍스트와 함께 원래 implmentation입니다 :

g.append('svg:text')
    .attr('x', 0)
    .attr('y', 4)
    .attr('class', 'id')
    .text(function(d) { return d.label; });

이제 아이콘으로 시도해 봅니다.

g.append('svg:i')
   .attr('x', 0)
   .attr('y', 4)
   .attr('class', 'id icon-fixed-width icon-user');

마크 업이 맞고 CSS 규칙이 제대로 적용되었지만 아이콘이 보이지 않아도 작동하지 않습니다.

왜 그런가?

다음은 관련 jsbin

편집하다

이미지 삽입을 위해이 대안을 찾았습니다 : http://bl.ocks.org/mbostock/950642

node.append("image")
    .attr("xlink:href", "https://github.com/favicon.ico")
    .attr("x", -8)
    .attr("y", -8)
    .attr("width", 16)
    .attr("height", 16);

어느 것을 정확하게하고 싶은지는 모르겠지만 FontAwesome에서 사용하는 <i> 요소는 작동하지 않습니다.


나는이 문제가 오래되었다는 것을 알고 해결되었다. 그러나 이것은 오늘날 나를 위해 일했다.

이 사이트에서

svg.append('svg:foreignObject')
    .attr("width", 50)
    .attr("height", 50)
    .append("xhtml:body")
    .html('<i class="fa fa-user"></i>');

그러나 내 차트의 경우 xhtml:body 추가하지 않았습니다. 그렇지 않으면 x 및 y 좌표를 설정할 수 없습니다.

요소는 사용자가 설정 한 글꼴의 폭과 높이를 채택합니다.

d3.select('svg')
    .append('svg:foreignObject')
    .attr('class', 'handle')
    .attr('x',  +getLeftBarPosition(i+1, 'handle')[0] + +getLeftBarPosition(i+1, 'handle')[1])
    .attr('y', state.barHeight/2)
    .html('<i class="fa fa-user"></i>')

여기에 코드를 넣으려면 CarlesAndres의 대답과 mhd의 의견을 바탕으로 나를 위해 일한 것이 무엇인지 :

node.append("text")
    .attr("style","font-family:FontAwesome;")
    .attr('font-size', "50px" )
    .attr("x", 440)
    .attr("y", 440)
    .text(function(d) { return '\uf118' });

일반적인 텍스트 요소 내에서 적절한 유니 코드를 사용하고 다음과 같이 font-family를 "FontAwesome"으로 설정해야합니다.

 node.append('text')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', function(d) { return d.size+'em'} )
    .text(function(d) { return '\uf118' }); 

이 정확한 코드는 "아이콘 미소"아이콘을 렌더링합니다. 모든 FontAwesome 아이콘의 유니 코드는 다음에서 찾을 수 있습니다.

http://fortawesome.github.io/Font-Awesome/cheatsheet/

&#xf118; 코드를 HTML / CSS 유니 코드 형식에서 Javascript 유니 코드 형식으로 변경해야하므로 &#xf118; 귀하의 자바 스크립트에 \uf118 작성해야합니다.





font-awesome