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




d3.js font-awesome (5)

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> 요소는 작동하지 않습니다.


Answers

답변 해 주신 모든 분들께 감사드립니다. 내 마지막 해결책은 CarlesAndres의 대답을 기반으로합니다.

g.append('text')
    .attr('text-anchor', 'middle')
    .attr('dominant-baseline', 'central')
    .attr('font-family', 'FontAwesome')
    .attr('font-size', '20px')
    .text(function(d) { return ICON_UNICODE[d.nodeType]; });

CSS에주의하십시오. 이는 SVG 속성보다 우선합니다.

그리고 이것이 보이는 방식입니다.

이것에 대한 좋은 점은 foreignObject 솔루션에 비해 이벤트가 D3에 의해 적절히 처리된다는 것입니다.


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

이 사이트에서

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>')

일반적인 텍스트 요소 내에서 적절한 유니 코드를 사용하고 다음과 같이 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 작성해야합니다.


여기에 코드를 넣으려면 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' });

받아 들여진 답변은 실제로 맞았지 만 필자의 경우에는 다양한 스케일 (확대 / 축소)으로 조정할 수있는 유연성이 필요했지만 24 시간 시계가 사용되도록 보장해야했습니다. 핵심은 다중 해상도 시간 형식 을 정의하는 것입니다 . 자세한 내용은 Documentation 페이지를 참조하십시오.

내 코드 :

var axisTimeFormat = d3.time.format.multi([
    [".%L", function(d) { return d.getMilliseconds(); }],
    [":%S", function(d) { return d.getSeconds(); }],
    ["%H:%M", function(d) { return d.getMinutes(); }],
    ["%H:%M", function(d) { return d.getHours(); }],
    ["%a %d", function(d) { return d.getDay() && d.getDate() != 1; }],
    ["%b %d", function(d) { return d.getDate() != 1; }],
    ["%B", function(d) { return d.getMonth(); }],
    ["%Y", function() { return true; }]
 ]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom")
    .tickFormat(axisTimeFormat);






javascript d3.js font-awesome