mxGraph实现鱼骨图(因果图)

鱼骨图由日本管理大师石川馨先生所发明,故又名石川图。鱼骨图是一种发现问题“根本原因”的方法,它也可以称之为“Ishikawa”或者“因果图”。其特点是简捷实用,深入直观。它看上去有些象鱼骨,问题或缺陷(即后果)标在"鱼头"外。在鱼骨上长出鱼刺,上面按出现机会多寡列出产生生产问题的可能原因,有助于说明各个原因之间如何相互影响。

这玩意儿就体现了一个什么5w1h的管理方法,经过我将近4周的时间捣鼓。由于原先想实现的过于复杂(主要由于本人数学知识浅薄),后来放弃了原先的两个方案。一是分支斜线扩展;二是分支上下、左右扩展。

不知道写点个啥,直接上代码吧。

/**
 * Created by numen_huang on 2014/8/6.
 */
$(function () {
    if (!mxClient.isBrowserSupported()) {
        // Displays an error message if the browser is not supported.
        mxUtils.error('Browser is not supported!', 200, false);
    }
    else {
        document.oncontextmenu = function () {
            return false;
        }
        var fish=new fishBone();
        fish.init();
    }
});
var fishBone=function(){};

fishBone.prototype.graph=null;

fishBone.prototype.init=function(){
    this.resetSourceCode();
    this.buildCanvas();
    this.setCanvasStyle();
    this.buildContextMenu();
    this.createFishBone();
};

fishBone.prototype.resetSourceCode=function(){
    var _this=this;
    mxCellRenderer.prototype.createLabel = function(state, value) {
        var graph = state.view.graph;
        var isEdge = graph.getModel().isEdge(state.cell);
        if (state.style[mxConstants.STYLE_FONTSIZE] > 0 || state.style[mxConstants.STYLE_FONTSIZE] == null) {
            var isForceHtml = (graph.isHtmlLabel(state.cell) || (value != null && mxUtils.isNode(value))) && graph.dialect == mxConstants.DIALECT_SVG;
            var h='';
            var spacingRight=-30;
            var spacingLeft=1;
            if(state.cell.id=='fishboneHead'){
                h='horizontal';
                spacingRight=spacingLeft=0;
            }
            if(state.cell.level%2==0 && state.cell.id!='fishboneHead'){
                h='horizontal';
                if(_this.getSelfTopParent(state.cell).direction=='bottom') {
                    spacingLeft = -25;
                }else{
                    spacingLeft = 0;
                }
            }
            var background=state.style[mxConstants.STYLE_LABEL_BACKGROUNDCOLOR];
            var borderColor=state.style[mxConstants.STYLE_LABEL_BORDERCOLOR];
            var color=state.style[mxConstants.STYLE_FONTCOLOR];
            if(state.cell.level==1){
                background='#B3D9D9';
                borderColor='#005757';
                color='#336666';
            }else{
                background='#F3F3F3';
                borderColor='#005757';
                color='#336666';
            }
            state.text = new mxText(value, null, (state.style[mxConstants.STYLE_ALIGN] || mxConstants.ALIGN_CENTER),
                graph.getVerticalAlign(state),color,
                state.style[mxConstants.STYLE_FONTFAMILY], state.style[mxConstants.STYLE_FONTSIZE],
                state.style[mxConstants.STYLE_FONTSTYLE], state.style[mxConstants.STYLE_SPACING],
                spacingLeft, 10,
                spacingRight, 10, h,
                background, borderColor,
                graph.isWrapping(state.cell), graph.isLabelClipped(state.cell), state.style[mxConstants.STYLE_OVERFLOW]);
            state.text.opacity = state.style[mxConstants.STYLE_TEXT_OPACITY];
            state.text.dialect = (isForceHtml) ? mxConstants.DIALECT_STRICTHTML: state.view.graph.dialect;
            this.initializeLabel(state);
            var getState = function(evt) {
                var result = state;
                if (mxClient.IS_TOUCH) {
                    var x = mxEvent.getClientX(evt);
                    var y = mxEvent.getClientY(evt);
                    var pt = mxUtils.convertPoint(graph.container, x, y);
                    result = graph.view.getState(graph.getCellAt(pt.x, pt.y));
                }
                return result;
            };
            var md = (mxClient.IS_TOUCH) ? 'touchstart': 'mousedown';
            var mm = (mxClient.IS_TOUCH) ? 'touchmove': 'mousemove';
            var mu = (mxClient.IS_TOUCH) ? 'touchend': 'mouseup';
            mxEvent.addListener(state.text.node, md, mxUtils.bind(this,
                function(evt) {
                    if (this.isLabelEvent(state, evt)) {
                        graph.fireMouseEvent(mxEvent.MOUSE_DOWN, new mxMouseEvent(evt, state));
                    }
                }));
            mxEvent.addListener(state.text.node, mm, mxUtils.bind(this,
                function(evt) {
                    if (this.isLabelEvent(state, evt)) {
                        graph.fireMouseEvent(mxEvent.MOUSE_MOVE, new mxMouseEvent(evt, getState(evt)));
                    }
                }));
            mxEvent.addListener(state.text.node, mu, mxUtils.bind(this,
                function(evt) {
                    if (this.isLabelEvent(state, evt)) {
                        graph.fireMouseEvent(mxEvent.MOUSE_UP, new mxMouseEvent(evt, getState(evt)));
                    }
                }));
            mxEvent.addListener(state.text.node, 'dblclick', mxUtils.bind(this,
                function(evt) {
                    if (this.isLabelEvent(state, evt)) {
                        graph.dblClick(evt, state.cell);
                        mxEvent.consume(evt);
                    }
                }));
        }
    };
    mxTriangle.prototype.redrawPath = function(path, x, y, w, h) {
        if (this.direction == mxConstants.DIRECTION_NORTH) {
            path.moveTo(0, h);
            path.lineTo(0.5 * w, 0);
            path.lineTo(w, h);
        } else if (this.direction == mxConstants.DIRECTION_SOUTH) {
            path.moveTo(0, 0);
            path.lineTo(0.5 * w, h);
            path.lineTo(w, 0);
        } else if (this.direction == mxConstants.DIRECTION_WEST) {
            path.moveTo(0, 0);
            path.lineTo(w, 0.5 * h);
            path.lineTo(0, h);
        }
        else if(this.direction == 'east'){
            path.moveTo(0, 0);
            path.quadTo(w, 0.25 * h,w+1,0.5*h);
            path.quadTo(w+1, 0.75 * h,0,h);
        }
        else{
            path.moveTo(0, 0);
            path.lineTo(w, 0.5 * h);
            path.lineTo(0, h);
        }
        path.close();
    };
    mxGraphSelectionModel.prototype.singleSelection = true;
    mxGraph.prototype.foldingEnabled=false;
    mxGraph.prototype.selectCellForEvent = function(cell, evt) {
        if(cell.id!='fishboneEnd' && cell.id!='fishboneBody' && !cell.isEdge()) {
            var isSelected = this.isCellSelected(cell);
            if (this.isToggleEvent(evt)) {
                if (isSelected) {
                    this.removeSelectionCell(cell);
                } else {
                    this.addSelectionCell(cell);
                }
            } else if (!isSelected || this.getSelectionCount() != 1) {
                this.setSelectionCell(cell);
            }
        }
    };
    mxGraph.prototype.moveCells = function(cells, dx, dy, clone, target, evt) {
        if(cells==null || cells.length>1){
            return false;
        }
        var cell=cells[0];

        if (dx != 0 || dy != 0 || clone || target != null) {
            this.getModel().beginUpdate();
            try {
                if (clone) {
                    return false;
                }
                if(cell.level==1){
                    var fishHead=_this.getCellById('fishboneHead');
                    var fishBody=_this.getCellById('fishboneBody');
                    var fishEnd=_this.getCellById('fishboneEnd');
                    if(cell.geometry.x+dx>fishHead.geometry.x-100){
                        cell.geometry.x+=dx;
                        var size=cell.geometry.x-fishHead.geometry.x;
                        fishHead.geometry.x+=size+100;
                        fishBody.geometry.width+=size+100;
                    }
                    else if(cell.geometry.x+dx<fishEnd.geometry.x+fishEnd.geometry.width+100){
                        cell.geometry.x+=dx;
                        var size=cell.geometry.x-(fishEnd.geometry.x+fishEnd.geometry.width);
                        fishBody.geometry.width+=Math.abs(size-100);
                        fishEnd.geometry.x+=size-100;
                        fishBody.geometry.x+=size-100;
                    }
                    else{
                        cell.geometry.x+=dx;
                    }
                }
                else if(cell.id=='fishboneHead'){
                    var fishHead=_this.getCellById('fishboneHead');
                    var fishBody=_this.getCellById('fishboneBody');
                    var children=_this.getChildSubject(fishHead);

                    var maxX=children.length>0?children[0].geometry.x:fishHead.geometry.x-30;
                    for(var i=0;i<children.length;i++){
                        if(children[i].geometry.x>maxX){
                            maxX=children[i].geometry.x;
                        }
                    }
                    var oldX=fishHead.geometry.x;
                    fishHead.geometry.x+=dx;
                    var size=fishHead.geometry.x-oldX;
                    if(fishHead.geometry.x<maxX+100){
                        fishHead.geometry.x=maxX+100;
                        size = fishHead.geometry.x-oldX;
                    }
                    fishBody.geometry.width+=size;
                }
                else if(cell.id=='fishboneEnd'){
                    var fishHead=_this.getCellById('fishboneHead');
                    var fishBody=_this.getCellById('fishboneBody');
                    var fishEnd=_this.getCellById('fishboneEnd');
                    var children=_this.getChildSubject(fishHead);
                    var minX=children.length>0?children[0].geometry.x:fishEnd.geometry.x-100;
                    for(var i=0;i<children.length;i++){
                        if(children[i].geometry.x<minX){
                            minX=children[i].geometry.x;
                        }
                    }
                    var oldX=fishEnd.geometry.x;
                    fishEnd.geometry.x+=dx;
                    var size=fishEnd.geometry.x-oldX;
                    if(fishEnd.geometry.x>minX-100){
                        fishEnd.geometry.x=minX-100;
                        size=fishEnd.geometry.x-oldX;
                    }
                    fishBody.geometry.x=fishEnd.geometry.x+fishEnd.geometry.width;
                    fishBody.geometry.width-=size;
                }
                else if (cell.direction == 'top' || cell.direction == 'bottom') {
                    if(cell.parent.children.length==1){
                        cell.geometry.x=0;
                        cell.parent.geometry.width-=dx;
                        cell.parent.geometry.x+=dx;
                        if(cell.parent.geometry.width<=70){
                            cell.parent.geometry.width=70;
                            cell.parent.geometry.x=-70;
                        }
                    }
                    else{
                        if(cell.geometry.x==0){
                            if(dx<0){
                                for(var i=0;i<cell.parent.children.length;i++){
                                    if(cell.parent.children[i].id!=cell.id){
                                        cell.parent.children[i].geometry.x-=dx;
                                    }
                                }
                                cell.parent.geometry.width-=dx;
                                cell.parent.geometry.x+=dx;
                                cell.geometry.x=0;
                            }
                            else{
                                if(cell.parent.children.length==1){
                                    if(cell.geometry.x+dx<cell.parent.geometry.width-70){
                                        cell.geometry.x+=dx;
                                    }else{
                                        cell.geometry.x=cell.parent.geometry.width-70;
                                    }
                                }
                                else{
                                    var children=cell.parent.children;
                                    var temp1=children[0];//最小y坐标的cell
                                    var t=0;
                                    for (var i = 0; i < children.length; i++) {
                                        if (children[i].geometry.x < temp1.geometry.x) {
                                            temp1 = children[i];
                                        }
                                        if(children[i].geometry.x==0){
                                            t++;
                                        }
                                    }
                                    var temp2=null;//第二小x坐标的cell
                                    for (var i = 0; i < children.length; i++) {
                                        if (children[i].geometry.x > cell.geometry.x && !temp2) {
                                            temp2=children[i];
                                            continue;
                                        }else if(temp2) {
                                            if (children[i].geometry.x < temp2.geometry.x && children[i].id != cell.id) {
                                                temp2 = children[i];
                                            }
                                        }
                                    }
                                    if(temp2 && t==1) {
                                        //没有超过第二小x坐标
                                        if (temp2.geometry.x - dx > 0) {
                                            for (var k = 0; k < cell.parent.children.length; k++) {
                                                if (cell.parent.children[k].id != cell.id) {
                                                    cell.parent.children[k].geometry.x -= dx;
                                                }
                                            }
                                            cell.geometry.x += dx;
                                            cell.parent.geometry.width -= dx;
                                            cell.parent.geometry.x += dx;
                                            cell.geometry.x = 0;
                                        }
                                        //超过第二小x坐标
                                        else {
                                            if(cell.parent.geometry.width-temp2.geometry.x==70){
                                                for (var k = 0; k < cell.parent.children.length; k++) {
                                                    cell.parent.children[k].geometry.x=0;
                                                }
                                                cell.parent.geometry.width=70;
                                                cell.parent.geometry.x=-70;
                                            }else {
                                                var size = dx - temp2.geometry.x;
                                                var pSize = cell.parent.geometry.width - temp2.geometry.x;
                                                for (var k = 0; k < cell.parent.children.length; k++) {
                                                    if (cell.parent.children[k].id != temp2.id && cell.parent.children[k].id != cell.id) {
                                                        cell.parent.children[k].geometry.x -= temp2.geometry.x;
                                                    }
                                                }
                                                cell.parent.geometry.width -= temp2.geometry.x;
                                                cell.parent.geometry.x += temp2.geometry.x;
                                                temp2.geometry.x = 0;
                                                if(size-pSize>0){
                                                    cell.geometry.x = cell.parent.geometry.width-70;
                                                }
                                                else {
                                                    cell.geometry.x = size;
                                                }
                                            }
                                        }
                                    }
                                    else if(t>1){
                                        if(cell.geometry.x+dx<cell.parent.geometry.width-70){
                                            cell.geometry.x+=dx;
                                        }else{
                                            cell.geometry.x=cell.parent.geometry.width-70;
                                        }
                                    }
                                }
                            }
                        }
                        else{
                            if(cell.geometry.x+dx<0){
                                var size = 0-(cell.geometry.x+dx);
                                for (var i = 0; i < cell.parent.children.length; i++) {
                                    if (cell.parent.children[i].id !=cell.id) {
                                        cell.parent.children[i].geometry.x+=size;
                                    }
                                }
                                cell.parent.geometry.x-=size;
                                cell.parent.geometry.width+=size;
                                cell.geometry.x=0;
                            }
                            else if(cell.geometry.x+dx==0){
                                cell.geometry.x=0;
                            }
                            else if(cell.geometry.x+dx>0 && cell.geometry.x+dx<cell.parent.geometry.width-70){
                                cell.geometry.x+=dx;
                            }
                            else{
                                cell.geometry.x=cell.parent.geometry.width-70;
                            }
                        }
                    }
                }
                else if(cell.direction == 'left'){
                    var py = 0;
                    var myCell=cell;
                    if(cell.parent.direction=='bottom') {
                        cell.geometry.y += dy;
                        for (var i = 0; i < cell.parent.children.length; i++) {
                            if (cell.parent.children[i].geometry.y > py)
                                py = cell.parent.children[i].geometry.y;
                        }
                        if(py>70) {
                            cell.parent.geometry.height = py;
                        }else{
                            cell.parent.geometry.height = 70;
                        }
                        if(cell.geometry.y<70){
                            cell.geometry.y=70;
                        }
                    }
                    else{
                        if(cell.geometry.y==0){
                            if(dy<0) {
                                for (var i = 0; i < cell.parent.children.length; i++) {
                                    if (cell.parent.children[i].id != cell.id) {
                                        cell.parent.children[i].geometry.y -= dy;
                                    }
                                }
                                cell.parent.geometry.y += dy;
                                cell.parent.geometry.height -= dy;
                            }
                            else{
                                //只有一个子集的时候
                                if(cell.parent.children.length==1){
                                    var fishBody=_this.getCellById('fishboneBody');
                                    //拖动超过父级label的位置
                                    if(!(cell.geometry.y==0 && cell.parent.geometry.height==70)) {
                                        if (cell.parent.geometry.height - dy < 70) {
                                            if(cell.parent.parent.id==1){
                                                cell.parent.geometry.y = fishBody.geometry.y - 68;
                                            }else{
                                                cell.parent.geometry.y = cell.parent.parent.geometry.y - 70;
                                            }
                                            cell.parent.geometry.height = 70;
                                        } else {
                                            cell.parent.geometry.height -= dy;
                                            cell.parent.geometry.y += dy;
                                        }
                                        cell.geometry.y = 0;
                                    }
                                }
                                else {//超过一个子集
                                    var children=cell.parent.children;
                                    var temp1=children[0];//最小y坐标的cell
                                    var t=0;
                                    for (var i = 0; i < children.length; i++) {
                                        if (children[i].geometry.y < temp1.geometry.y) {
                                            temp1 = children[i];
                                        }
                                        if(children[i].geometry.y==0){
                                            t++;
                                        }
                                    }
                                    var temp2=null;//第二小y坐标的cell
                                    for (var i = 0; i < children.length; i++) {
                                        if (children[i].geometry.y > temp1.geometry.y && !temp2) {
                                            temp2=children[i];
                                            continue;
                                        }else if(temp2) {
                                            if (children[i].geometry.y < temp2.geometry.y && children[i].id != temp1.id) {
                                                temp2 = children[i];
                                            }
                                        }
                                    }
                                    //当没有超过第二小y坐标时。
                                    if(temp2 && t==1) {
                                        if (cell.geometry.y + dy < temp2.geometry.y) {
                                            for (var k = 0; k < cell.parent.children.length; k++) {
                                                if (cell.parent.children[k].id != cell.id) {
                                                    cell.parent.children[k].geometry.y -= dy;
                                                }
                                            }
                                            cell.parent.geometry.height -= dy;
                                            cell.parent.geometry.y += dy;
                                            cell.geometry.y = 0;
                                        }
                                        //当超过第二小y坐标时候
                                        else {
                                            cell.geometry.y += dy;
                                            var py = cell.parent.geometry.height - (cell.parent.geometry.height - temp2.geometry.y);
                                            for (var k = 0; k < cell.parent.children.length; k++) {
                                                if (cell.parent.children[k].id != temp2.id) {
                                                    cell.parent.children[k].geometry.y -= py;
                                                }
                                            }
                                            cell.parent.geometry.height -= temp2.geometry.y;
                                            cell.parent.geometry.y += temp2.geometry.y;
                                            temp2.geometry.y = 0;

                                            for (var j = 0; j < cell.parent.children.length; j++) {
                                                if (cell.parent.geometry.height - cell.parent.children[j].geometry.y < 70) {
                                                    cell.parent.children[j].geometry.y = cell.parent.geometry.height - 70;
                                                }
                                            }
                                        }
                                    }
                                    else if(t>1){
                                        if(cell.parent.geometry.height>70) {
                                            if (cell.parent.geometry.height - dy < 70) {
                                                cell.geometry.y = 70;
                                            } else {
                                                cell.geometry.y = dy;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        else{
                            if(cell.geometry.y+dy>0){
                                if(cell.parent.geometry.height-(cell.geometry.y+dy)<=70){
                                    cell.geometry.y=cell.parent.geometry.height-70;
                                }else {
                                    cell.geometry.y += dy;
                                }
                            }else{
                                for (var i = 0; i < cell.parent.children.length; i++) {
                                    if (cell.parent.children[i].id != cell.id) {
                                        cell.parent.children[i].geometry.y -= (cell.geometry.y+dy);
                                    }
                                }
                                cell.parent.geometry.y += (cell.geometry.y+dy);
                                cell.parent.geometry.height -= cell.geometry.y+dy;
                                cell.geometry.y=0;
                            }
                        }
                    }
                }
            } finally {
                this.getModel().endUpdate();
                this.refresh();
            }
        }
        return cells;
    };

    mxGraph.prototype.dblClick = function(evt, cell) {
        if(cell.id!='fishboneEnd' && cell.id!='fishboneBody' && !cell.isEdge()) {
            var mxe = new mxEventObject(mxEvent.DOUBLE_CLICK, 'event', evt, 'cell', cell);
            this.fireEvent(mxe);
            if (this.isEnabled() && !mxEvent.isConsumed(evt) && !mxe.isConsumed() && cell != null && this.isCellEditable(cell)) {
                this.startEditingAtCell(cell, evt);
            }
        }
    };
//    mxGraph.prototype.labelChanged = function(cell, value, evt) {
//        this.model.beginUpdate();
//        var geo=cell.geometry;
//        try {
//            this.cellLabelChanged(cell, value, true);
//            this.fireEvent(new mxEventObject(mxEvent.LABEL_CHANGED, 'cell', cell, 'value', value, 'event', evt));
//            geo.height =geo.height+((value.length-5>0)? (value.length-5)*18:0);
//            cell.geometry=geo;
//            if(cell.level>1){
////                var myEdge = cell.edges[0];
////                var point = myEdge.geometry.points[0];
////                point.x=0;
////                myEdge.geometry.points=[point];
//            }
//        } finally {
//            this.model.endUpdate();
//        }
//        return cell;
//    };
    mxCellEditor.prototype.init = function() {
        this.textarea = document.createElement('input');
        this.textarea.className = 'mxCellEditor';
        this.textarea.style.position = 'absolute';
        this.textarea.style.overflow = 'visible';
        this.textarea.setAttribute('type', 'textbox');
        if (false) {
            this.textarea.style.resize = 'none';
        }
        mxEvent.addListener(this.textarea, 'blur', mxUtils.bind(this,
            function(evt) {
                this.stopEditing(!this.graph.isInvokesStopCellEditing());
            }));
        mxEvent.addListener(this.textarea, 'keydown', mxUtils.bind(this,
            function(evt) {
                if (!mxEvent.isConsumed(evt)) {
                    if (evt.keyCode == 113 || (this.graph.isEnterStopsCellEditing() && evt.keyCode == 13 && !mxEvent.isControlDown(evt) && !mxEvent.isShiftDown(evt))) {
                        this.graph.stopEditing(false);
                        mxEvent.consume(evt);
                    } else if (evt.keyCode == 27) {
                        this.graph.stopEditing(true);
                        mxEvent.consume(evt);
                    } else {
                        if (this.clearOnChange) {
                            this.clearOnChange = false;
                            this.textarea.value = '';
                        }
                        this.setModified(true);
                    }
                }
            }));
    };
    mxGraphHandler.prototype.selectEnabled=false;
};

fishBone.prototype.buildCanvas=function(){
    var container = document.createElement('div');
    container.style.position = 'absolute';
    container.style.overflow = 'hidden';
    container.style.left = '0px';
    container.style.top = '0px';
    container.style.right = '0px';
    container.style.bottom = '0px';
    document.body.appendChild(container);
    var node = mxUtils.load('config/keyhandler-commons.xml').getDocumentElement();
    this.editor = new mxEditor(node);
    this.editor.graph=new mxGraph(container);
    this.graph = this.editor.graph;
    var outline = document.getElementById('outlineContainer');
    new mxOutline(this.graph, outline);
    if (mxClient.IS_IE) {
        new mxDivResizer(container);
        new mxDivResizer(outline);
    }
    this.graph.clearSelection();
    this.graph.setEnabled(true);
    this.graph.setTooltips(false);
    this.graph.setConnectable(false);
    this.graph.setPanning(true);
    this.graph.setCellsResizable(false);
};

fishBone.prototype.setCanvasStyle=function(){
    var graph=this.graph;
    var style = graph.getStylesheet().getDefaultVertexStyle();
    style[mxConstants.STYLE_FONTCOLOR] = 'black';
    style[mxConstants.STYLE_STROKECOLOR] = '#8E8E8E';
    style[mxConstants.STYLE_FILLCOLOR] = 'white';
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_FONTSTYLE] = 1;
    style[mxConstants.STYLE_FONTFAMILY] = '微软雅黑';
    // Sets the default style for edges
    style = graph.getStylesheet().getDefaultEdgeStyle();
    style[mxConstants.STYLE_ROUNDED] = true;
    style[mxConstants.STYLE_EDGE] = mxEdgeStyle.STRAIGHT;

    // Enables rubberband selection and key handling
    var rubberband = new mxRubberband(graph);
    var keyHandler = new mxKeyHandler(graph);
};

fishBone.prototype.buildContextMenu=function(){
    var fish=this;
    mxPopupMenu.prototype.submenuImage = 'src/images/submenu.gif';
    this.graph.panningHandler.factoryMethod = function (menu, cell, evt) {
        if (cell != null && !cell.isEdge() && cell.id!='fishboneEnd' && cell.id!='fishboneBody') {
            var item= menu.addItem('插入','src/images/maximize.gif');
            menu.addItem('插入主题','src/images/maximize.gif', function () {
                fish.createSubject(cell);
                fish.graph.clearSelection();
            },item);
            menu.addItem('插入子主题','src/images/normalize.gif', function () {
                fish.createSubject(cell,true);
                fish.graph.clearSelection();
            },item);
            menu.addItem('删除','images/delete2.png', function () {
                fish.graph.removeCells([cell]);
            });
            menu.addItem('编辑','images/icons48/tab.png', function () {
                fish.graph.startEditingAtCell(cell);
            });
        }else{
            this.graph.clearSelection();
        };
    };
};

fishBone.prototype.createFishBone=function(){
    var xml = '            <mxGraphModel>                                                                               <root>                                                                                       <mxCell id="0"/>                                                                           <mxCell id="1" parent="0"/>                                                                <mxCell id="fishboneEnd" value="" parent="1" vertex="1" style="shape=triangle;direction=east1;fillColor=#CEFFCE;gradientColor=#93FF93;">                        <mxGeometry x="510" y="240" width="40" height="110" as="geometry"/>                      </mxCell>                                                                                  <mxCell id="fishboneBody" value="" vertex="1" parent="1" style="shape=triangle;direction=west;fillColor=#4F4F4F;">                          <mxGeometry x="550" y="290" width="800" height="10" as="geometry"/>                      </mxCell>                                                                                  <mxCell id="fishboneHead" level="0" value="需要解决的问题" vertex="1" parent="1" style="shape=triangle;direction=east;fillColor=#CEFFCE;gradientColor=#93FF93;fontSize=18;">                             <mxGeometry x="1351" y="252" width="150" height="80" as="geometry"/>                     </mxCell>              </root>                                                                                  </mxGraphModel>                                                                        ';
    doc = mxUtils.parseXml(xml);
    var codec = new mxCodec(doc);
    //mxShape.prototype.direction = mxConstants.DIRECTION_NORTH;
    codec.decode(doc.documentElement, this.graph.getModel());
    var items=['人员','管理','过程','环境','设备','材料'];
    var cell=this.getCellById('fishboneHead');
    for(var i=0;i<items.length;i++) {
        this.createSubject(cell, true,items[i]);
    };
};

fishBone.prototype.createSubject=function(cell,isSub,text){
    var model=this.graph.getModel();
    var graph=this.graph;
    var fish=this;
    var x = 0, y = 0, py = 0, px = 0;
    var myChild = fish.getChildSubject(cell);
    if(!cell.children)cell.children=[];

    //子主题在下方,插入子主题方向错误
    //子主题在右侧,插入子主题方向错误
    /*水平方向子主题*/
    var insertHorizontalSubLevel=function(){
        var selfTopParent = fish.getSelfTopParent(cell);
        if (!text)text = '分支主题' + (cell.children.length + 1);
        x = -70;
        if(selfTopParent.direction=='bottom') {
            if (cell.children.length == 0) {
                y = 70;
            } else {
                y += cell.geometry.height+70;
            }
            var myCell = graph.insertVertex(cell, null, text, x, y, 70, 1, 'shape=line;verticalAlign=top;align=right;strokeWidth=1;strokeColor=#BB3D00;');
            myCell.level = cell.level + 1;
            myCell.direction = 'left';
            myCell.geometry.x -= 70;
            if (myCell.parent.parent.direction == 'left') {
                myCell.parent.parent.geometry.height = 1;
            }

            var resize = function (cell) {
                if (cell.parent.direction == 'bottom' && cell.parent.level > 1) {
                    if (cell.parent.parent.children.length > 1 && cell.parent.children.length == 1 && cell.parent.geometry.x > 0) {
                        for (var k = 0; k < cell.parent.parent.children.length; k++) {
                            if (cell.parent.parent.children[k].geometry.x >= cell.parent.geometry.x && cell.parent.children.length == 1) {
                                cell.parent.parent.children[k].geometry.x += 50;
                                cell.parent.parent.geometry.x -= 50;
                                cell.parent.parent.geometry.width += 50;
                            }
                        }
                    }
                    cell.parent.geometry.height = cell.parent.children[cell.parent.children.length - 1].geometry.y;
                } else {
                    cell.parent.geometry.height = 1;
                }
                if (cell.parent.level != 1) {
                    resize(cell.parent);
                } else {
                    cell.parent.geometry.height = cell.parent.children[cell.parent.children.length - 1].geometry.y;
                }
            };
            resize(myCell);
        }
        else{
            y = 0;
            for(var i=0;i<cell.children.length;i++){
                cell.children[i].geometry.y+=70;
            }
            if(cell.children.length>0) {
                cell.geometry.height += 70;
                cell.geometry.y -= 70;
            }
            var myCell = graph.insertVertex(cell, null, text, x, y, 70, 1, 'shape=line;verticalAlign=top;align=right;strokeWidth=1;strokeColor=#BB3D00;');
            myCell.level = cell.level + 1;
            myCell.direction = 'left';
            myCell.geometry.x -= 70;

            if (myCell.parent.parent.direction == 'left') {
                myCell.parent.parent.geometry.height = 1;
            }

            var resize = function (cell) {
                if(cell.direction=='top' && cell.level!=1 && cell.children.length==1){
                    for(var k=cell.parent.children.length-1;k>=0;k--){
                        if(cell.parent.children[k].geometry.x>=cell.geometry.x){
                            cell.parent.children[k].geometry.x+=cell.children[0].geometry.width;
                        }
                    }
                    cell.geometry.x-=myCell.geometry.width;
                }
            };
            resize(myCell.parent);
        }
    };
    /*垂直方向子主题*/
    var insertVerticalSubLevel=function(){
        var selfTopParent = fish.getSelfTopParent(cell);
        var leftTopParents=fish.getLeftTopParent(selfTopParent,true);
        if (!text)text = '分支主题'+(cell.children.length+1);
        if(cell.children.length==0)
            x=0;
        else {
            var maxX=0;
            for(var i=0;i<cell.children.length;i++){
                if(cell.children[i].geometry.x>maxX){
                    maxX=cell.children[i].geometry.x;
                }
            }
            x = 50 + maxX;
        }
        var align='right';
        var direction='bottom';
        if(selfTopParent.direction=='bottom') {
            y = 1;
        }else{
            y=0;
            align='left';
            direction='top';
        }

        var myCell = graph.insertVertex(cell, null, text, x, y, 1, 70, 'shape=line;direction=north;verticalAlign=top;align='+align+';spacingBottom=10;strokeWidth=1;strokeColor=#BB3D00;');
        myCell.parentId = cell.id;
        myCell.level=cell.level+1;
        myCell.direction=direction;
        if(selfTopParent.direction=='bottom') {
            if (cell.children.length == 1) {
                var t = 0;
                for (var i = 0; i < cell.parent.children.length; i++) {
                    if (cell.parent.children[i].id != cell.id && cell.parent.children[i].geometry.y > cell.geometry.y) {
                        cell.parent.children[i].geometry.y += myCell.geometry.height;
                        t++;
                    }
                }
                if (t > 0) {
                    selfTopParent.geometry.height += myCell.geometry.height;
                }
            };
            var resize = function (cell) {
                var parent = cell.parent;
                if(parent.id!=1) {
                    if (cell.direction == 'left')cell.geometry.height = 1;
                    if (parent.direction == 'left') {
                        parent.geometry.height = 1;
                        if (parent.children.length > 1 && cell.geometry.x > 0) {
                            parent.geometry.width += 50;
                            parent.geometry.x -= 50;
                        }
                        resize(parent);
                    } else {
                        parent.geometry.height = parent.children[parent.children.length - 1].geometry.y;
                        if (parent.level != 1 && parent.parent.children.length > 1 && cell.parent.geometry.x > 0) {
                            for (var k = 0; k < parent.parent.children.length; k++) {
                                if (parent.parent.children[k].geometry.x >= parent.geometry.x)
                                    parent.parent.children[k].geometry.x += 50;
                            }
                        }
                        resize(parent);
                    }
                }
            };
            resize(myCell);
        }
        else{
            myCell.geometry.y-=70;
            var t=0;
            if (cell.children.length == 1&&cell.geometry.y>0) {
                for (var i = 0; i < cell.parent.children.length; i++) {
                    if(cell.parent.children[i].geometry.y>0 && cell.parent.children[i].geometry.y>=cell.geometry.y){
                        cell.parent.children[i].geometry.y+=cell.geometry.height;
                        t++;
                    }
                }
                cell.parent.geometry.height += myCell.geometry.height;
                cell.parent.geometry.y -= myCell.geometry.height;
            };
            var resize = function (cell) {
                if (cell.direction == 'left') {
                    cell.geometry.height = 1;
                    if(cell.children.length>1){
                        for (var k = 0; k < cell.children.length; k++) {
                            if (cell.children[k].geometry.x <= cell.geometry.x)
                                cell.children[k].geometry.x += 50;
                        }
                        cell.geometry.x-=50;
                        cell.geometry.width+=50;
                    }
                }
                else {
                    if(cell.children.length>1){
                        for (var k = 0; k < cell.children.length; k++) {
                            if (cell.children[k].geometry.x >= cell.geometry.x)
                                cell.children[k].geometry.x += 50;
                        }
                        cell.geometry.x-=50;
                    }
                }
            };
            resize(myCell.parent);
        }
    };

    var insertTopLevel=function(){
        var direction='bottom';
        if(myChild.length%2==0){
            direction='top';
        }
        model.beginUpdate();
        x = cell.geometry.x - (myChild.length / 2 * 100) - (myChild.length + 1) * 30;
        if(myChild.length>0) {
            x = myChild[0].geometry.x;
            for (var t = 0; t < myChild.length; t++) {
                if (myChild[t].geometry.x < x) {
                    x = myChild[t].geometry.x;
                }
            }
        }
        x-=100;
        if (myChild.length % 2 == 0) {
            y = cell.geometry.y - 30;
        } else {
            y = cell.geometry.y + 45;
        }
        if (!text)text = '分支主题';
        var vAlign='top';
        var dir='north';
        var align='right';
        if (myChild.length % 2 == 0) {
            vAlign='bottom';
            dir='south';
            align='left';
        }
        var myCell = graph.insertVertex(graph.getDefaultParent(), null, text, x, y, 1, 70, 'shape=line;align='+align+';verticalAlign='+vAlign+';direction='+dir+';verticalLabelPosition=middle;fontSize=18;strokeWidth=1;strokeColor=#8C8C00;');
        myCell.parentId = cell.id;
        myCell.level=cell.level+1;
        myCell.direction=direction;

        model.endUpdate();
        graph.clearSelection();
    };
    var insert=function(){
        if(cell.level==0){
            insertTopLevel();
        }else{
            if(isSub){
                insertSubLevel();
            }else{
                insertSameLevel();
            }
        }
    };
    var insertSameLevel=function(){
        if(cell.level){
            if(cell.level==1){
                cell=fish.getCellById('fishboneHead');
                myChild = fish.getChildSubject(cell);
                insertTopLevel();
            }else{
                cell=cell.parent;
                myChild = cell.children;
                insertSubLevel();
            }
        }else{
            cell=cell.parent;
            myChild = cell.children;
            insertTopLevel();
        }

    };
    var insertSubLevel=function(){
        switch (cell.direction){
            case 'left':
                insertVerticalSubLevel();
                break;
            case 'top':
            case 'bottom':
                insertHorizontalSubLevel();
                break;
        }
        graph.refresh();
    };

    insert();
};

fishBone.prototype.getChildSubject=function(cell){
    var allCells=this.graph.model.root.children[0].children;
    var children=[];
    for(var i=0;i<allCells.length;i++){
        if(allCells[i].parentId==cell.id){
            children.push(allCells[i]);
        }
    }
    return children;
};

fishBone.prototype.getCellById=function(id){
    var allCells=this.graph.model.root.children[0].children;
    for(var i=0;i<allCells.length;i++){
        if(allCells[i].id==id){
            return allCells[i];
        }
    }
    return null;
};

/*
 * 获取当前主题的1级主题
 * */
fishBone.prototype.getSelfTopParent=function(cell){
    if(cell.level==1){
        return cell;
    }else{
        if(cell.parent.level==1){
            return cell.parent;
        }else{
            return this.getSelfTopParent(cell.parent);
        }
    }
};
/*
 * 获取左侧所有1级主题
 * */
fishBone.prototype.getLeftTopParent=function(selfParentCell,isBottom){
    var allCells=this.graph.model.root.children[0].children;
    var arr=[];
    for(var i=0;i<allCells.length;i++){
        if(isBottom){
            if(allCells[i].level==1 && allCells[i].direction=='bottom' && allCells[i].geometry.x<selfParentCell.geometry.x){
                arr.push(allCells[i]);
            }
        }else{

        }
    }
    return arr;
};
/*
 * 获取除自己以外的1级主题
 * */
fishBone.prototype.getOtherTopParentCell=function(selfParentCell){
    var allCells=this.graph.model.root.children[0].children;
    var allTopParentCell=[];
    for(var i=0;i<allCells.length;i++){
        if(allCells[i].level==1 && allCells[i].id!=selfParentCell.id){
            allTopParentCell.push(allCells[i]);
        }
    }
    return allTopParentCell;
}



时间: 2024-10-09 15:25:40

mxGraph实现鱼骨图(因果图)的相关文章

测试用例设计方法-因果图(鱼骨图)

因果图,又叫鱼骨图 输入与输入之间的关系 异:所有输入条件中最多有一个为真,也可以一个也没有 或:所有输入条件中最少有一个为真,或者多个,或者所有 唯一:所有输入条件中,有且只有一个条件为真 要求:所有输入条件中,只要有一个产生,其他也跟着产生 输入与输出之间的关系 恒等 当输入条件发生时,结果一定发生 当输入条件不发生时,结果一定不会出现 非 当输入条件发生时,结果一定不会出现 当输入条件不发生时,结果一定出现 与 当多个输入条件时,必须所有输入条件都发生,结果才会出现 或 当多个输入条件时,

鱼骨图实践

鱼骨图是日本的管理大师石川馨先生发明出来的,所以又被叫做"石川图".鱼骨图的作用又是为了发现问题的"根本原因",所以石川图又被称之为"因果图". 鱼骨图与我们经常使用的MindManager工具是有异曲同工之妙的,当我们希望对一个问题建立整体的认识的时候,经常会借助MindManager强大的头脑风暴的能力,围绕着一个问题点进行发散与分析. 相对MindManager相比,鱼骨图更加集中于分析影响问题的特性.我们通过头脑风暴找到导致这个问题的因素

Mindmanager 甘特图杠上Mindmanager 鱼骨图

MindManager中文版作为一种优秀的思维导图工具,加入甘特图功能后,使其功能更加强大,应用范围更广泛.而推荐用MindManager甘特图来作为项目管理,原因有一下几点: 1.MindManager甘特图通过将任务管理图形化,将复杂的规划简洁化,已与理解. 2.能够很好的掌控中小型项目的任务进程和情况. 3.在MindManager 15中文版的软件支持下,无须担心复杂的计算和分析. 4.可以通过建立关联.依赖关系将各项目任务间紧密联系,使得更为系统. 在MindManager 中文版中,

查找问题根本原因之5W2H、鱼骨图

终于终于西蒙用小提琴拉了一首<小星星>,内牛满面啊! 正文: 在过程分析和数据分析的基础上,需要从多个方面,广泛寻找导致问题发生的潜在原因,这是一个群策群力的过程.寻找问题原因的主要方法是头脑风暴会议,问题寻找的过程,也往往不会只通过一次或几次的头脑风暴就可以找到问题原因,我们要充分发挥团体的智慧,从各种不同的角度找出问题的所有潜在原因.在使用头脑风暴时候,结合5W2H分析法,能够避免遗漏问题原因. 5W2H分析 5W2H是一种提问式的查找问题原因和解决措施的方法,它是以5个W开头的英文单词和

想要创建漂亮的鱼骨图?试试这个企业项目设计工具吧!

鱼骨图(也称为根本原因分析)可以帮助进行头脑风暴,以确定问题的可能原因并将想法分类为有用的类别.鱼骨图是一种可视方式,用于查明因果关系,找出问题的可能原因.本篇教程我们将使用Visual Paradigm来创建一个漂亮的鱼骨图,赶快来看看吧~ 开发鱼骨图的步骤 以下步骤概述了创建鱼骨图的主要步骤. 确定问题陈述(也称为效果).这是写在"鱼"的嘴里.尽可能清楚和具体地解决问题.谨防根据解决方案定义问题(例如,我们需要更多的东西). 确定问题原因的主要类别(从主箭头写为分支).主要类别通常

鱼骨图的使用方法

在使用鱼骨图进行讨论整理时候,我们要确定一个讨论主题,这个主题通常是“产品/服务流程”中存在的主要问题或缺陷,或者是流程的关键质量特性.(流程的关键质量特性在前文中讲到过) 这个讨论主题就是鱼骨图的鱼头. 接下来就要画出鱼骨,即讨论造成问题的主要原因.在制造应用中,原因通常分为人员.机器.材料.方法.测量和环六个主要类别,服务质量应用一般包括人员.程序和策略,当然,这是对经验的总结,鱼骨图可以包含希望的调查的任何类型的原因. 最后就是找到鱼刺,在这个环节需要使用头脑风暴激发思路,通过不断问:“为

MindManager鱼骨图分析法注意点汇总

MindManager鱼骨图分析法注意点汇总一.鱼骨分析法类型 1.整理问题型鱼骨图(各要素与特性值间不存在原因关系,而是结构构成关系): MindManager鱼骨图分析法注意点汇总2.对策型鱼骨图(鱼头在左,特性值通常以"如何提高/改善--"来写). MindManager鱼骨图分析法注意点汇总3.原因型鱼骨图(鱼头在右,特性值通常以"为什么--"来写): MindManager鱼骨图分析法注意点汇总二:鱼骨图分析法原理 当问题出现时,大家一起来讨论问题产生的根

jQuery横向上下排列鱼骨图形式信息展示代码时光轴样式(转自CSDN,原文链接附于文中)

原文链接:http://www.jqueryfuns.com/resource/2173 $.fn.fishBone = function(data) { var colors = ['#F89782', '#1A84CE', '#F7A259', '#43A6DA', '#F9BF3B','#88C7CC','#EF6D5F','#60A96E','#F03852','#3A9284']; /**入口*/ //1.创建dom $(this).children().remove(); $(thi

【PMP】各种图(草稿)

5.2.2.5 项目范围管理----收集需求----数据表现 亲和图/KJ图[用来对大量创意进行分组的技术,以便进一步审查和分析] 核心是头脑风暴法 思维导图[把头脑风暴中获得的创意整合成一张图,用以反应创意之间的共性和差异,激发新创意] 8.1.2.5 项目质量管理----规划质量管理----数据表现流程图/过程图[用来显示在一个或多个输入转化成一个或多个输出的过程中,所需要的步骤顺序和可能分支.它通过映射水平价值链的过程细节来显示活动.决策点.分支循环.并行路径及整体处理顺序.] 矩阵图[矩