添加 JavaScript 到 w2ui 面板

Question

我对 JavaScript 很陌生。我想使用 w2ui 面板创建一个使用 D3.js 进行数据可视化的网页。这是我的代码：

<!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面板的左窗格（或任何指定的窗格）中绘制一个矩形。谢谢！

Answer 1

首先，您可能应该查看布局/面板的 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>

添加 JavaScript 到 w2ui 面板

add JavaScript to w2ui panel

html

javascript

jquery

d3.js

w2ui