score:1

First question, if you want HTML/CSS why are you appending them to SVG?

Second thing, d3 doesn't mean you can't use CSS. You don't have to in-line styles if you don't want. Just assign them a class.

Third, you are missing the point of d3. It's all about driving your display through data (the 3 ds are data driven documents). Your data here would be an array element for each "block".

Something like this (please forgive my horrible CSS):

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@3.0.0" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script data-require="d3@3.5.17" data-semver="3.5.17" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
    <style>
      .my-block {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        box-shadow: 10px 10px 5px #888888;
        float: left;
        margin: 20px;
        position: relative;
      }
      .icon {
          position:absolute;
          top: 80px;
          right: 5px;
          color: #fff;
      }
      .text {
          position:absolute;
          top: 40px;
          left: 25px;
          color: #fff;
      }
    </style>
  </head>

  <body>
    <script>
    var data = [
      {
        name: "block 1",
        icon: "glyphicon-pencil"
      },{
        name: "block 2",
        icon: "glyphicon-film"
      },{
        name: "block 3",
        icon: "glyphicon-off"
      },{
        name: "block 4",
        icon: "glyphicon-user"
      }
    ];
    
    var body = d3.select('body');
    
    var divs = body.selectAll('.my-block')
      .data(data)
      .enter()
      .append('div')
      .attr('class', 'my-block')
      
    divs.append('span')
      .text(function(d){
        return d.name;
      })
      .attr("class", "text");
      
    divs.append('span')
      .attr("class", function(d){
        return "icon control glyphicon " + d.icon;
      });
    
    </script>
  </body>

</html>


Related Query

More Query from same tag