將JavaScript添加到w2ui面板

我對JavaScript很陌生。我想使用w2ui面板創建使用D3.js進行數據可視化的網頁。這是我的代碼：將JavaScript添加到w2ui面板

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>W2UI Demo: layout-2</title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" /> 
 
</head> 
 
<body> 
 

 
<div id="layout" style="width: 100%; height: 400px;"></div> 
 

 
<script type="text/javascript"> 
 
$(function() { 
 
    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'; 
 
    $('#layout').w2layout({ 
 
     name: 'layout', 
 
     padding: 4, 
 
     panels: [ 
 
      { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' }, 
 
      { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' }, 
 
      { type: 'main', style: pstyle, content: 'main' }, 
 
      { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' } 
 
     ] 
 
    }); 
 
}); 
 
    
 
    
 
    d3.select("body") 
 
    .append("svg") 
 
    .append("rect") 
 
    .attr("width",50) 
 
    .attr("height",200) 
 
    .style("fill","blue") 
 

 
     
 
</script> 
 

 
</body> 
 
</html>

我的問題是如何指定D3js繪製w2ui面板的左側窗格中矩形（或任何指定的窗格）。謝謝！

來源

2017-02-12 Amir

首先，您應該查看w2ui docs的佈局/面板並瞭解填充面板的不同方法（content(), set(), load(), html(), ...）。

下面的例子會將你的藍色方塊繪製到主面板中。

這不是做你想做什麼（看看onContent用於替代超時）的最佳方法，但它應該給你一個想法如何實現自己的目標。

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>W2UI Demo: layout-2</title> 
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
    <script type="text/javascript" src="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.js"></script> 
 
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 
 
    <link rel="stylesheet" type="text/css" href="http://rawgit.com/vitmalina/w2ui/master/dist/w2ui.min.css" /> 
 
</head> 
 
<body> 
 

 
<div id="layout" style="width: 100%; height: 400px;"></div> 
 

 
<script type="text/javascript"> 
 
$(function() { 
 
    var pstyle = 'border: 1px solid #dfdfdf; padding: 5px;'; 
 
    $('#layout').w2layout({ 
 
     name: 'layout', 
 
     padding: 4, 
 
     panels: [ 
 
      { type: 'top', size: 50, resizable: true, style: pstyle, content: 'top' }, 
 
      { type: 'left', size: 200, resizable: true, style: pstyle, content: 'left' }, 
 
      { type: 'main', style: pstyle, content: '<div style="height: 100%; width: 100%" id="my_div"></div>' }, 
 
      { type: 'right', size: 200, resizable: true, style: pstyle, content: 'right' } 
 
     ] 
 
    }); 
 
}); 
 
    
 

 
setTimeout(function(){ 
 
    
 
    d3.select("#my_div") 
 
    .append("svg") 
 
    .append("rect") 
 
    .attr("width",50) 
 
    .attr("height",200) 
 
    .style("fill","blue") 
 
}, 100); 
 
     
 
</script> 
 

 
</body> 
 
</html>

來源

2017-02-12 10:21:32

它的工作原理謝謝 – Amir

將JavaScript添加到w2ui面板

回答

相關問題