D3：在DIV中添加样式和类会导致样式被丢弃

Question

我尝试为基于d3的项目实现类似于界面的窗口，但是当我向其中添加classattr DIV并尝试通过left, right它们控制窗口位置时，d3只是忽略了它，而样式标签对于window来说是空的，所以我遇到了一个奇怪的问题DIV。

我需要的通用功能是添加和控制窗口位置。

我准备小提琴

这是一个代码：

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>

解决方案：实际上，所有这些简单操作我只是忘了添加px值。我更新了小提琴以显示其工作原理。

Answer 1

您只是忘记了“ 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");