将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面板

回答

相关问题