文章/答案/技术大牛

发布

问向w2ui面板添加JavaScript
EN

Stack Overflow用户

提问于 2017-02-12 08:10:35

回答 1查看 684关注 0票数 0

我对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面板的左侧窗格(或任何指定窗格)中绘制矩形。谢谢!

javascript

jquery

html

d3.js

w2ui

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-12 18:21:33

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/42182785

复制

相似问题

问向w2ui面板添加JavaScript
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向w2ui面板添加JavaScriptEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问向w2ui面板添加JavaScript
EN