Question

我尝试为基于d3的项目实现类似界面的窗口，但我有一个奇怪的问题，当我将class attr添加到DIV然后尝试通过{{1}控制窗口位置它们只是被d3忽略而且样式标记对于窗口left, right变为空。

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

我准备fiddle

这是一段代码：

＆＃13;

DIV

＆＃13;

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

＆＃13;

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;
}

＆＃13;

解决方案：实际上我只是忘了为值添加<script src="https://d3js.org/d3.v3.min.js"></script> <div class="dia_body"></div>。我更新了小提琴来展示它是如何工作的。

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

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

1 个答案: