如何在SVG中包含Bootstrap Glyphicon

我正在創建一個使用面板的自定義D3.js圖表，並希望在其中包含一些Bootstrap Glyphicons，但它們似乎並未呈現。如何在SVG中包含Bootstrap Glyphicon

我用我的代碼創建了一個JSFiddle，但我的代碼在下面。

 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>

來源

2017-03-09 TheAuzzieJesus

請添加正確的jsfiddle url路徑 –

現在應該修復。 – TheAuzzieJesus

您可以用.glyphicon類添加文本並使用您想作爲文本屬性圖標unicode的。下面給你一個攝像頭圖標：

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

你需要包括bootstrap css並知道圖標的unicode。這link爲您提供這些代碼。

來源

2017-03-09 13:16:58 Razzildinho

如何在SVG中包含Bootstrap Glyphicon

回答

相關問題