How to include Bootstrap Glyphicon in an SVG

Question

I'm creating a custom D3.js chart that uses panels and wish to include some Bootstrap Glyphicons inside them, but they don't seem to be rendering.

I've created a JSFiddle with my code, but my code is below aswell.

  var margin = { top: 20, right: 20, bottom: 70, left: 40 }, width = 1800 - margin.left - margin.right, height = 1800 - margin.top - margin.bottom; var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); var data = [{ "name": "Read", "status": "Green" }, { "name": "Write", "status": "Green" }, { "name": "StorageAccount", "status": "Red" }]; var panelPadding = 10; var panelWidth = 250; var panelHeight = 150; var rowCountMax = 2; var currentRow = 0; var xcount = 0; var ycount = 0; svg.selectAll("status-panel") .data(data) .enter().append("rect") .attr("class", "status-panel") .attr("x", function(d, i) { if (xcount == rowCountMax) xcount = 0; return (panelWidth + panelPadding) * xcount++; }) .attr("y", function(d, i) { if (ycount == rowCountMax) { currentRow += (panelHeight + panelPadding); ycount = 1; return currentRow; } else { ycount++; return currentRow; } }) .attr("width", panelWidth) .attr("height", panelHeight) .attr("fill", function(d, i) { return d.status == "Green" ? "#07BA72" : "#F14659"; }) .append("html") .attr() xcount = 0; ycount = 0; currentRow = 0; var yTextPadding = 20; svg.selectAll("status-panel") .data(data) .enter() .append("text") .attr("class", "status-panel-text") .attr("text-anchor", "middle") .attr("fill", "white") .attr("x", function(d, i) { if (xcount == rowCountMax) xcount = 0; return (panelWidth + panelPadding) * xcount++ + ((panelWidth + panelPadding) / 2) - (d.name.length / 2); }) .attr("y", function(d, i) { if (ycount == rowCountMax) { currentRow += (panelHeight + panelPadding); ycount = 1; return currentRow + ((panelHeight + panelPadding) / 2); } else { ycount++; return currentRow + ((panelHeight + panelPadding) / 2); } }) .text(function(d) { return d.name; }) .attr("font-weight", "200");

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://d3js.org/d3.v4.min.js"></script> <body> </body>

Answer 1

You can add text with a .glyphicon class and use the unicode for the icon you want as the text attribute. The following gives you a video camera icon:

d3.select('svg')
    .append('text')
    .attr('class', 'glyphicon')
    .text('\ue059');

You'll need to include the bootstrap css and know the unicode of the icons. This link gives you those codes.

How to include Bootstrap Glyphicon in an SVG

Question

1 answers

solution1
2 ACCPTED 2017-03-09 13:16:58

How to include Bootstrap Glyphicon in an SVG

Question

1 answers

solution1 2 ACCPTED 2017-03-09 13:16:58

solution1
2 ACCPTED 2017-03-09 13:16:58