Wie Bootstrap Glyphicon in einem SVG enthalten

Ich erstelle ein benutzerdefiniertes D3.js-Diagramm, das Panels verwendet und möchten einige Bootstrap Glyphicons in ihnen enthalten, aber sie scheinen nicht zu rendern.Wie Bootstrap Glyphicon in einem SVG enthalten

Ich habe eine JSFiddle mit meinem Code erstellt, aber mein Code ist auch unten.

 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>

Quelle

2017-03-09 TheAuzzieJesus

pls fügen Sie korrekte jsfiddle URL Pfad –

Es sollte jetzt behoben werden. – TheAuzzieJesus

Sie können Text mit einer .glyphicon Klasse hinzufügen und die Unicode für das Symbol, das Sie als Textattribut wollen verwenden. Im Folgenden finden Sie eine Videokamera-Symbol:

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

Sie werden die Bootstrap-CSS und kennen die Unicode der Symbole umfassen müssen. Diese link gibt Ihnen diese Codes.

Quelle

2017-03-09 13:16:58 Razzildinho

Wie Bootstrap Glyphicon in einem SVG enthalten

Antwort

Verwandte Themen