xswei / d3js_doc Goto Github PK

                        </div>
                    </div>
                </div>
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="fa fa-share-alt icon icon-cray"></i>可视化展示
                            <ul class="layui-layout-right" style="margin-right: 10px;">
                                <button type="button" class="layui-btn layui-btn-primary  layui-btn-radius layui-btn-xs paigusu">BigSystem</button>
                                <button type="button" class="layui-btn layui-btn-primary  layui-btn-radius layui-btn-xs paigusu">Equipment</button>
                                <button type="button" class="layui-btn layui-btn-primary  layui-btn-radius layui-btn-xs paigusu">Symptom</button>
                                <button type="button" class="layui-btn layui-btn-primary  layui-btn-radius layui-btn-xs paigusu">Crew</button>
                            </ul>
                        </div>
                        <div class="layui-card-body">
                            <div id="graph"></div>
                        </div>
                        <div style="border-bottom:1px solid #f6f6f6;color:#333;"></div>
                        <div style="height:32px;line-height:32px;padding:0 15px;" id="nodeMessage">

                        </div>
                    </div>
                </div>
                <div class="layui-col-md7">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <i class="fa fa-bar-chart icon icon-blue"></i>图形展示
                            {% comment %}<ul class="layui-layout-right">
                                <i class="fa fa-bar-chart icon icon-blue" title="柱状图" style="cursor:pointer;"></i>
                                <i class="fa fa-line-chart icon icon-blue" title="折线图" style="cursor:pointer;"></i>
                                <i class="fa fa-pie-chart icon icon-blue" title="饼状图" style="cursor:pointer;"></i>
                            </ul>{% endcomment %}
                        </div>
                        <div class="layui-card-body">
                            <div id="echarts_view" style="width: 100%;min-height:200px"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-md5">
                    <div class="layui-card">
                        <div class="layui-card-header"><i class="fa fa-share-alt icon"></i>数据展示</div>
                        <div class="layui-card-body">
                            <div style="width: 100%;min-height:200px" id="dataMessage">

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>

function testsGraphs(){
    let init_label=[{type:"BigSystem"},{type:"Equipment"}];
    let news_label=[{type:"BigSystem"},{type:"Crew"},{type:"Equipment"}];
    let arr_c = init_label.concat(news_label);
    let result = [];
    for (let i = 0; i < arr_c.length; i++) {
        let flag = true;
        let temp = arr_c[i];
        for (let j = 0; j < result.length; j++) {
            // 普通数组 (temp === result[j])
            if (temp.type === result[j].type) {
                flag = false;
                break;
            }
        }
        if (flag) {
            result.push(temp);
        }
    }

    let myJson = {"name": "phpernote", "password": "1111","index":"0"};
    for (let val in myJson) {
        if(val!="index")
            alert(val + " " + myJson[val]);//输出如:name
    }
}
// 颜色选择器
$('.paigusu').paigusu({
    color : '#1926dc',//初始色  支持两种配置方案
},function(event,obj){
	console.log(event);
	console.log(obj);
	$(event).css('background-color','#' + obj.hex);
	let c = $(event).text();
    $("."+c).css("fill",'#' + obj.hex);
});

var width = $("#graph").width();
var height = 400;
var nodes = [];         // 节点数据
var links = [];         // 变关系数据
var svg;
var simulation;
var marker;
var svg_links;
var edge_text;
var svg_nodes;
var svg_texts;
var lineTextFontSize = 12;
var circle_radius = 23;
//var color = d3.scaleOrdinal(d3.schemeCategory20);
var links_group;  // 线边层
var nodes_group;  // 节点层
var nodeConfig = []; //标签样色,数量配置

// 绘制节点
function drawNodes(){
    svg_nodes = nodes_group.selectAll("circle")
        .data(nodes)
        .enter()
        .append("circle")
        .attr("r", circle_radius)
        .attr("class", function (d) {
            return d.type;
        })
        .style("fill", function (d, i) {
            if(d.type == 'BigSystem'){
                return "#00C5CD";
            }else if(d.type == 'Equipment'){
                return "#9BCD9B";
            }else{
                return "#EEDC82";
            }if(d.type== 'Symptom'){
                return "#EEDC82";
            }else{
                return "#CDCDB4";
            }
        })
        .call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended))//创建一个拖拽行为
        .on("click",function(node){
            //单击时让连接线加粗
            svg_links.style("stroke-width",function(line){
                if(line.source.name==node.name || line.target.name==node.name){return 4;}else{return 2;}
            });
        })
        .on("mouseover", function (d, i) {
            d3.select(this).classed('active', true);
            let htmls = nodesMessage(d);
            $("#nodeMessage").html(htmls);
        }).on("mouseout", function (d, i) {
            d3.select(this).classed('active', false);
            $("#nodeMessage").html('<span style="color:#666666">总计：节点'+nodes.length+'个，关系边：' + links.length + '条');
        }).on("dblclick", function(d, i){
            expsGraphs(d.type, d.pk);
        });
}
// 绘制节点描述文字
function drawNodesText(){
    svg_texts =  nodes_group
        .selectAll("text")
        .data(nodes)
        .enter()
        .append("text")
        .style("fill", "black")
        .attr("dominant-baseline","middle")
        .attr("text-anchor", "middle")
        .text(function (d) {
            if(d.name.length > 3){
                return d.name.substring(0,3) + "\n" + "..";
            }else{
                return d.name;
            }
        });
}
// 绘制节点之间的连接线
function drawLinks(){
    svg_links = links_group.selectAll(".edgepath")
        .data(links)
        .enter()
        .append("path")
        .attr('class','edgepath')
        .attr('id',function(d,i) {return 'edgepath'+i;})
        .style("stroke",'#ccc')
        .style("pointer-events", "none")
        .style("stroke-width",2);  //线条粗细
}
// 绘制连接线描述文字
function drawLinksText(){
    edge_text = links_group.selectAll(".edgelabel")
        .data(links)
        .enter()
        .append("text")
        .style('font-size', lineTextFontSize)
        .style("pointer-events", "none")
        .attr('class','edgelabel')
        .attr('id',function(d,i){return 'edgepath'+i;})
        .attr('dx',30)
        .attr('dy',0)
        .append('textPath')
        .attr('xlink:href',function(d,i) {return '#edgepath'+i})
        .style("pointer-events", "none")
        .text(function(d){return '同事';});
}
// 绘制连接线箭头
function drawMarker(){
    marker = svg.append("marker")
        .attr("id", "resolved")
        .attr("markerUnits","userSpaceOnUse")
        .attr("viewBox", "0 -5 10 10")//坐标系的区域
        .attr("refX",28)//箭头坐标
        .attr("refY", 0)
        .attr("markerWidth", 12)//标识的大小
        .attr("markerHeight", 12)
        .attr("orient", "auto")//绘制方向，可设定为：auto（自动确认方向）和 角度值
        .attr("stroke-width",1)//箭头宽度
        .append("path")
        .attr("d", "M0,-5L10,0L0,5")//箭头的路径
        .attr('fill','#CCCCCC');//箭头颜色
}
// 绘制力导向图
function drawsGraphs(label,name){
    clearGraphs();
    $.ajax({
        url: "/ResModel/find_nodes",
        type: "POST",
        dataType: "JSON",
        data:{"label":label,"name":name},
        async: false,       // false 为同步, true 为异步
        success: function(data) {
            for (let i=0;i<data.length;i++) {
                nodes.push(data[i]);
            }
        },
        //请求失败，包含具体的错误信息
        error : function(e) {
            console.log(e.status);
            console.log(e.responseText);
        }
    });
    createSVG();    //创建 SVG 图层
    //设置SVG大小并且创建缩放行为和设置缩放范围
    svg.attr("width", width).attr("height", height).call(d3.zoom().scaleExtent([1, 1]).on('zoom',zoom_actions));
    //初始化力学仿真器，通过布局函数格式化数据
    simulation = d3.forceSimulation(nodes)
        .force("link", d3.forceLink(links).distance(120))           //distance设置连线距离
        .force("charge", d3.forceManyBody().strength(-50))
        .force("center", d3.forceCenter(width / 2 - 200, height / 2)).on("tick", ticked);    //设置力学仿真器的中心
    // 绘制节点
    drawNodes();
    //绘制节点描述文字
    drawNodesText();
    // 绘制连线
    drawLinks();
    // 绘制连线文字
    drawLinksText();
    // 绘制连接线箭头
    drawMarker();
}
// 双击节点展开关联节点
function expsGraphs(label, id){
    $.ajax({
        url: "/ResModel/exps_nodes",
            type: "POST",
            dataType: "JSON",
            data:{
                "label":label,
                "id":id
            },
            async: true,       // false 为同步, true 为异步
            success: function(data) {
                let dataNodes = data.nodes;
                let dataLinks = data.links;
                let jsonLinks = filterLinks(links,dataLinks);   //过滤关系连接线边
                let jsonNodes = filterNodes(nodes,dataNodes);   //过滤节点
                // 为节点添加位置信息以供links使用
                let nodesSize = nodes.length;
                for (let i=0;i<jsonNodes.length;i++){
                    jsonNodes[i].maps = nodesSize + i;
                    nodes.push(jsonNodes[i]);
                }
                for (let k=0;k<jsonLinks.length;k++){
                    for (let j=0;j<nodes.length;j++) {
                        if(jsonLinks[k].s_node == nodes[j].pk){
                            jsonLinks[k].source = nodes[j].maps;
                        }
                        if(jsonLinks[k].e_node == nodes[j].pk){
                            jsonLinks[k].target = nodes[j].maps;
                        }
                    }
                    links.push(jsonLinks[k]);
                }
                $("#dataMessage").text(JSON.stringify(nodes));
                updateGraphs();
            },
            //请求失败，包含具体的错误信息
            error : function(e) {
                console.log(e.status);
                console.log(e.responseText);
            }
        });
}
// 更新力导向图
function updateGraphs(){
     svg_nodes = svg_nodes
        .data(nodes, (d) => d.name)
        .enter()
        .append("circle")
        .attr("r",circle_radius)
        .attr("class", function (d) {
            return d.type;
        })
        .style("fill", function (d, i) {
            if(d.type == 'BigSystem'){
                return "#00C5CD";
            }else if(d.type == 'Equipment'){
                return "#9BCD9B";
            }else if(d.type== 'Symptom'){
                return "#EEDC82";
            }else{
                return "#CDCDB4";
            }})
        .call(d3.drag().on("start", dragstarted).on("drag", dragged).on("end", dragended))
         .merge(svg_nodes)
        .on("click",function(node){
            //单击时让连接线加粗
            svg_links.style("stroke-width",function(line){
                if(line.source.pk==node.pk || line.target.pk==node.pk){return 4;}else{return 2;}
            });
        })
        .on("mouseover", function (d, i) {
            d3.select(this).classed('active', true);
            let htmls = nodesMessage(d);
            $("#nodeMessage").html(htmls);
        }).on("mouseout", function (d, i) {
            d3.select(this).classed('active', false);
            $("#nodeMessage").html('<span style="color:#666666">总计：节点'+nodes.length+'个，关系边：' + links.length + '条');
        }).on("dblclick", function(d, i){
            expsGraphs(d.type, d.pk);
        });
    svg_texts = svg_texts.data(nodes)
        .enter()
        .append("text")
        .style("fill", "black")
        .attr("dominant-baseline","middle")
        .attr("text-anchor", "middle")
        .text(function(d){
            if(d.name.length > 3){
                return d.name.substring(0,3) + "..";
            }else{
                return d.name;
            }})
        .merge(svg_texts);
    svg_links = svg_links.data(links, (d) => {return d.source.name + "-" + d.target.name; })
        .enter()
        .append("path")
        .style("stroke","#ccc")
        .attr('class','edgepath')
        .attr('id',function(d,i) {return 'edgepath'+i;})
        .style("pointer-events", "none")
        .style("stroke-width",2)
        .merge(svg_links);
    edge_text = edge_text.data(links)
        .enter()
        .append("text")
        .style("pointer-events", "none")
        .attr('class','edgelabel')
        .attr('id',function(d,i){return 'edgepath'+i;})
        .attr('dx',30)
        .attr('dy',0)
        .append('textPath')
        .attr('xlink:href',function(d,i) {return '#edgepath'+i})
        .text(function(d){
            if(d.type.length > 4){
                return d.type.substring(0,4) + "..";
            }else{
                return d.type;
            }})
        .merge(edge_text);
    simulation.nodes(nodes);
    simulation.force("link").links(links);
    simulation.alpha(1).restart();
}
// 清空力导向图
function clearGraphs(){
    links = [];
    nodes = [];
    d3.selectAll("svg").remove();
    $("#nodeMessage").text('');
}
// 过滤节点对象，取差集
function filterNodes(init_arr,data_arr) {
    let clone = data_arr.slice(0);
    for (let i = 0; i < init_arr.length; i++) {
        let temp = init_arr[i];
        for (let j = 0; j < clone.length; j++) {
            // 普通数组 (temp === clone[j])
            if (temp.pk === clone[j].pk) {
                clone.splice(j, 1);
            }
        }
    }
    return clone;
}
// 过滤边对象，取差集
function filterLinks(init_arr,data_arr) {
    let clone = data_arr.slice(0);
    for (let i = 0; i < init_arr.length; i++) {
        let temp = init_arr[i];
        for (let j = 0; j < clone.length; j++) {
            // 普通数组 (temp === clone[j])
            if (temp.pk === clone[j].pk) {
                clone.splice(j, 1);
            }
        }
    }
    return clone;
}
// 鼠标移动节点信息
function nodesMessage(d){
    let htmls = '<button type="button" class="layui-btn layui-btn-primary  layui-btn-radius layui-btn-xs ">' + d.type +
                '</button> &nbsp;&nbsp;' +
                '<span style="color:#666666">';
    for (var val in d){
        if(val != 'index' && val != 'x' && val != 'y'
            && val != 'vx' && val != 'vy' && val != 'maps' && val != 'fy' && val != 'fx'){
            htmls +=  "[" + val + "]：" + d[val]+"&nbsp;&nbsp;";
        }
    }
    htmls = htmls + '</span>';
    return htmls;
}
// 创建 SVG 图层
function createSVG(){
    svg = d3.select("#graph").append("svg");
    links_group = svg.append('g');  // 线边层
    nodes_group = svg.append('g');  // 节点层
}
 //监听拖拽开始
function dragstarted(d) {
    if (!d3.event.active){
        simulation.alphaTarget(0.8).restart(); //alpha是动画的冷却系数，运动过程中会不断减小，直到小于0.005为止，此时动画会停止。
    }
    d.fx = d.x;    //fx为固定坐标，x为初始坐标  注3>
    d.fy = d.y;
}
//监听拖拽中
function dragged(d) {
    d.fx = d3.event.x;  //fevent.x为拖拽移动时的坐标
    d.fy = d3.event.y;
}
//监听拖拽结束
function dragended(d) {
    if (!d3.event.active)
        simulation.alphaTarget(0);
    d.fx = null;        //固定坐标清空
    d.fy = null;
}
//拖拽时的事件监听器  以实时更新坐标
function ticked() {
    svg_nodes
        .attr("cx",function(d){return d.x;})
        .attr("cy",function(d){return d.y;})
    svg_texts
        .attr("x", function(d){ return d.x; })
        .attr("y", function(d){ return d.y; });
    svg_links
        .attr("d",function(d){
            return 'M '+ d.source.x +' '+d.source.y+' L '+ d.target.x +' '+d.target.y
        })
        .attr("marker-end", "url(#resolved)");
}
//比例缩放和拖动
function zoom_actions() {
    var transform = d3.event.transform;
    svg_nodes.attr('transform', transform);
    svg_texts.attr("transform",transform);
    svg_links.attr("transform",transform);
}

//图形展示
var echarts_view = echarts.init(document.getElementById('echarts_view'));
var optionRecords = {
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data:['检修（大）','检修（小）','日常维护']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    toolbox : {
        show : true,
        feature : {
            magicType : {
                show : true,
                type : [ 'line', 'bar' ]
            },
            restore : {
                show : true
            },
            saveAsImage : {
                show : true,
                title : '保存为图片',
                type : 'png',
                lang : [ '点击保存' ]
            }
        }
    },
    xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['阀门','泵','电气','燃料堆','反应堆','蒸汽','隔离区']
    },
    yAxis: {
        type: 'value'
    },
    series: [
        {
            name:'检修（大）',
            type:'line',
            data:[10, 10, 10, 10, 15, 15, 20]
        },
        {
            name:'检修（小）',
            type:'line',
            data:[4, 4, 6, 4, 3, 3, 4]
        },
        {
            name:'日常维护',
            type:'line',
            data:[20, 50, 30, 40, 10, 30, 50]
        }
    ]
};
echarts_view.setOption(optionRecords);
//echarts 窗口缩放自适应
window.onresize = function(){
    echartsRecords.resize();
}