D3：將樣式和類添加到DIV結果中放棄的樣式

我試圖爲基於d3的項目實現類似於界面的窗口，但我遇到奇怪的問題，當我將class屬性添加到DIV，然後嘗試通過left, right它們僅被d3忽略，並且樣式標籤在窗口DIV中變爲空。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。我更新了小提琴以展示它的工作原理。

來源

2017-10-17 Vasilij Altunin

你剛纔忘了「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");

來源

2017-10-17 05:14:59 1Cr18Ni9

啊哈哈，感謝隊友:)我忘了這一點。 –

D3：將樣式和類添加到DIV結果中放棄的樣式

回答

相關問題