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

发布网友发布时间：2022-04-29 07:10

共1个回答

热心网友时间：2022-05-18 14:52

直接上图上代码:

可用于绘制拓扑结构图.
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:

                // 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",
                    "
).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 + ")";
                                });
                    });
        });
    }
});