Question

我正在创建一个使用面板的自定义D3.js图表，并希望在其中包含一些Bootstrap Glyphicons，但它们似乎没有渲染。

我用我的代码创建了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>

Answer 1

您可以使用.glyphicon类添加文本，并使用所需图标的unicode作为文本属性。以下为您提供了摄像机图标：

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

您需要包含bootstrap css并知道图标的unicode。这个link会为您提供这些代码。

如何在SVG中包含Bootstrap Glyphicon

1 个答案: