D3: adding style and class to DIV results in styles discarded
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");
Vasilij Altunin
My name Vasilij Altunin, i am live in Magadan, Russia I am programmer with about 10 year experience. Prefer use CSS, HTML, PHP, JavaScript and Java languages. Have some experience in Python, VBA, C#, Pascal, don't like C and C++. Know how to works with MySQL server. Have 8 years experience in Network Administration, Active Directory administration, Windows 2012 R2 based. Linux server administration, prefer Debian. Windows XP,7,8,10 based AD workstation administration. Know how to setup Mikrotik router, including routing and firewall settings. I prefer to work with Joomla CMS and create plugins and components for it. Now studding, in depth, CSS, XML and JavaScript. Here my latest projects: http://magadanfitness.ru/ Time to time, like to draw - http://skyr9999.deviantart.com/
Updated on June 09, 2022Comments
-
Vasilij Altunin almost 2 years
I try to implement windows like interface for my d3-based project, but I have strange problem, when i add
class
attr toDIV
and then try to control window position vialeft, right
they are just ignored by d3 and style tag become empty for windowDIV
.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.