BlogJava-我爱佳娃-随笔分类-javascript

如何在extjs的PANEL里用d3.js来绘图

我爱佳娃 — Wed, 26 Sep 2012 23:38:00 GMT

EXTJS和D3都很强大,不解释了,把D3绘的图直接放到一个EXT的TAB里,直接上图上代码:

代码中的D3例子来自:

https://github.com/mbostock/d3/wiki/Force-Layout
可用于绘制拓扑结构图.

Ext.define('EB.view.content.SingleView', {
    extend : 'Ext.panel.Panel',
    alias : 'widget.singleview',

    layout : 'fit',

    title : 'single view',

    initComponent : function() {
        this.callParent(arguments);
    },

    onRender : function() {
        var me = this;

        me.doc = Ext.getDoc();
        me.callParent(arguments);

        me.drawMap();
    },

    drawMap : function() {
        var width = 960, height = 500

        var target = d3.select("#" + this.id+"-body");

        var svg = target.append("svg").attr("width", width).attr("height",
                height);

        var force = d3.layout.force().gravity(.05).distance(100).charge(-100)
                .size([width, height]);

                // get from: https://github.com/mbostock/d3/wiki/Force-Layout
                // example: force-directed images and labels
        d3.json("graph.json", function(json) {
            force.nodes(json.nodes).links(json.links).start();

            var link = svg.selectAll(".link").data(json.links).enter()
                    .append("line").attr("class", "link");

            var node = svg.selectAll(".node").data(json.nodes).enter()
                    .append("g").attr("class", "node").call(force.drag);

            node.append("image").attr("xlink:href",
                    "https://github.com/favicon.ico").attr("x", -8).attr("y",
                    -8).attr("width", 16).attr("height", 16);

            node.append("text").attr("dx", 12).attr("dy", ".35em").text(
                    function(d) {
                        return d.name
                    });

            force.on("tick", function() {
                        link.attr("x1", function(d) {
                                    return d.source.x;
                                }).attr("y1", function(d) {
                                    return d.source.y;
                                }).attr("x2", function(d) {
                                    return d.target.x;
                                }).attr("y2", function(d) {
                                    return d.target.y;
                                });

                        node.attr("transform", function(d) {
                                    return "translate(" + d.x + "," + d.y + ")";
                                });
                    });
        });
    }

});

我爱佳娃 2012-09-27 07:38 发表评论

一种把JAVASCRIPT代码划分为模块程序，内部遵循MVC的BROWSER端程序架构

我爱佳娃 — Sun, 09 Mar 2008 08:52:00 GMT

摘要: 描述在WEB浏览器端的代码架构，主要讲得是有哪些功能点，JS代码结构如何划分。阅读全文

我爱佳娃 2008-03-09 16:52 发表评论

导致EXT JS 2.0中分隔条在IE6下无效的一句话

我爱佳娃 — Fri, 26 Oct 2007 14:16:00 GMT

我一个JSP页面，在IE6下死活分隔条没有响应，在FF下没问题，左找右找，才发现是开头的一句：

http://www.w3.org/TR/html4/strict.dtd">

把我害惨了!

我爱佳娃 2007-10-26 22:16 发表评论

SWFObject困扰俺一天

我爱佳娃 — Sat, 08 Sep 2007 14:02:00 GMT

今天被SWFObject困扰一天，发现：

SWFObject通过本地HTML用不成功，必须通过WEB在线方式取。
直接用ADOBE的OBJECT标签都可以。但是如果一旦加入EXT-YUI的使用，在IE下不行，FF可以。所以还是用SWFObject稳妥些。
就算是在线取，如果在嵌套IE的浏览工具里(如TT)也会不成功，FF没有问题。
用SWFObject时还要注意，如果要访问FLASH的函数，输出完FLASH后，并不能马上取得指针使用，而要在其它函数中使用，比如：通过某个按钮事件激发。

也就是，把这部分放在初始化中：

var so = new SWFObject(format_path ("swf/hehe.swf"), "mytopo", "800", "600", "8", "#FFFFFFFF");
so.write("flashcontent");
this._topo = thisMovie("mytopo");

使用的语句放在另一处：

_topo.setBK(format_path ("images/pic3.jpg"));

归根结底，FLASH函数调用的调试，目前实验成功的：一是要用SWF，二是要在线调试。

我爱佳娃 2007-09-08 22:02 发表评论

面向对象JAVASCRIPT总结

我爱佳娃 — Sun, 13 May 2007 10:01:00 GMT

用C++和JS的类来类比如下：

C++ JS
类一个function(也是一个对象，即名称-属性集合)，因为它实际定义了一个类，所以又叫constructor

成员函数     constructor的属性prototype对象里定义，这样用constructor来new的对象都会继承它
成员            在constructor中用this.xxx赋值的一般属性
静态成员     直接function的名字"."赋值
多重继承      constructor.prototype = new SuperClass ()，这样新定义的constructor的prototype继承了SuperClass的prototype，但要用constructor.prototype.constructor = constructor，把构造函数赋成新的constructor

所以说白了，JS的类就是一个函数对象。JS自动为它创建了属性prototype，可以被new出来的对象继承。

我爱佳娃 2007-05-13 18:01 发表评论