w2uiパネルにJavaScriptを追加

JavaScriptの新機能です。 w2uiパネルを使用して、D3.jsを使用してデータの視覚化用のWebページを作成したいこれは私のコードです：w2uiパネルにJavaScriptを追加

<!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>

私の質問はw2uiパネルの左側のペイン（または指定した任意のペイン）で、長方形を描画するD3jsを指定する方法です。ありがとうございました！

出典

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

w2uiパネルにJavaScriptを追加

答えて

関連する問題