I'm trying to create a windows-like interface for my d3-based project, but I've encountered a strange issue. When I add the class attribute to a DIV element and then attempt to control the window position using left and right, they seem to be ignored by d3 and the style tag becomes empty for the window DIV.
I need a universal function that can add and control window positions.
Here is a link to the working fiddle
Below is the code snippet:
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>The solution was simple - I just forgot to add px for values. The updated fiddle demonstrates how it works now.