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

Question

我尝试为我的基于 d3 的元素实现类似窗口的界面，但是当我将 class 属性添加到 DIV 然后尝试控制窗口时，我遇到了一个奇怪的问题通过 left, right 定位它们只是被 d3 忽略并且样式标签对于窗口 DIV 变为空。

我只需要通用函数来添加和控制窗口位置。

我准备fiddle

代码如下:

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。我更新了 fiddle 以展示它是如何工作的。

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");