D3: adding style and class to DIV results in styles discarded

Question

I try to implement windows like interface for my d3-based project, but I have strange problem, when i add class attr to DIV and then try to control window position via left, right they are just ignored by d3 and style tag become empty for window DIV.

All I need universal function to add and control windows position.

I prepare fiddle

Here is a code:

var addWindow = function(parent, aClass, x, y, width, height) {
    var aWindow = d3.select(parent)
        .append("div")
        .attr("class", aClass)
        .style("top", y)
        .style("left", x)
        .style("width", width)
        .style("height", height);

    aWindow.append("div")
        .attr("class", "window-header-3d")
        .text("List");

    return aWindow;
}

persons_listbox = addWindow(".dia_body", "window-3d", 30, 30, 200, 300);

//persons list
persons_list = persons_listbox.append("ul").attr("class", "window-list-3d")


persons_list.append("li").attr("class", "window-item-3d").text("11111");
persons_list.append("li").attr("class", "window-item-3d").text("12111");
persons_list.append("li").attr("class", "window-item-3d").text("13111");

body {
  background-color:rgba(50,50,50,1);   
}

.window-header-3d {
  width:100%;
  height:30px;
  border-radius:5px;
  background-color:rgba(250,250,250,1);
  z-index:1000;
  position:relative;
  padding-top:5px;
  padding-bottom:5px;
  text-align:center;
  margin-bottom:10px;
  border-bottom-right-radius: 0px;
  border-bottom-left-radius: 0px;
}

.window-item-3d {
  /*background-color: rgba(255, 255, 255, 1);*/
}

.window-list-3d {
  list-style: none;
  overflow-y: scroll;
  padding-left: 10px;
}

.window-3d {
  position:absolute;
  border:1px #ddd solid;
  border-radius:5px;
  background-color:rgba(255,255,255,0.5);
  z-index:1000;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<div class="dia_body"></div>

SOLUTION: It actually all simple i just forgot add px for values. I updated fiddle to show how it works.

Answer 1

You just forget the "px":

var aWindow = d3.select(parent)
            .append("div")
            .attr("class",aClass)
            // <div style="top:30px; left:40px; width:50px; height:50px;"></div>
            .style("top",y + "px")
            .style("left",x + "px")
            .style("width",width + "px")
            .style("height",height + "px");