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>

    <script data-require="jquery@3.0.0" data-semver="3.0.0" src=""></script>
    <link data-require="bootstrap@3.3.7" data-semver="3.3.7" rel="stylesheet" href="" />
    <script data-require="bootstrap@3.3.7" data-semver="3.3.7" src=""></script>
    <script data-require="d3@3.5.17" data-semver="3.5.17" src=""></script>
      .my-block {
        width: 100px;
        height: 100px;
        background-color: steelblue;
        box-shadow: 10px 10px 5px #888888;
        float: left;
        margin: 20px;
        position: relative;
      .icon {
          top: 80px;
          right: 5px;
          color: #fff;
      .text {
          top: 40px;
          left: 25px;
          color: #fff;

    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 ='body');
    var divs = body.selectAll('.my-block')
      .attr('class', 'my-block')
      .attr("class", "text");
      .attr("class", function(d){
        return "icon control glyphicon " + d.icon;


Related Query

More Query from same tag