zbcx_ckyc 1.0.0

package/src/plugins/app/znycpjxt/intellPred/coms/D3DrawGraph.js

@@ -0,0 +1,634 @@
+import * as d3 from "d3";
+
+/**
+ * 类名：DrawGraph
+ * 描述：D3绘导向图组织类
+ * 作者：王卫
+ * 时间：20230601
+ */
+class DrawGraph {
+
+    /**
+     * 构造函数
+     * @param {视图} chart 
+     */
+    constructor(chart) {
+
+        this.g = null;
+        this.svg = d3.select(chart)
+            .append("svg")
+            .attr("width", "100%")
+            .attr("height", "100%")
+            .attr("preserveAspectRatio", "xMidYMid meet")  //控制缩放形式
+            .on("click", this.clickCancel.bind(this))
+            .on("mousedown", (event) => {
+                if (event.button === 1) {
+                    this.resetCentor();
+                }
+            });
+
+        this.zoom = d3.zoom();
+        this.simulation = null;
+        this.table = null;
+        this.id = '';
+        this.color = d3.scaleOrdinal().range(d3.schemeCategory10);
+        this.strength = 2000;
+    }
+
+    /**
+     * 清空视图
+     */
+    clearChart() {
+
+        //重置缩放事件
+        this.zoom.scaleTo(this.svg, 1);
+        this.zoom.translateTo(this.svg, 0, 0);
+        this.svg.call(this.zoom.transform, d3.zoomTransform(this.svg).scale(1));
+
+        //移除所有内容
+        this.svg.selectAll("*").remove();
+        this.g = null;
+        this.id = '';
+        this.table = null;
+    }
+
+    /**
+     * 获得当前激活节点
+     * @returns 返回节点id
+     */
+    getCurNode() {
+        return this.id;
+    }
+
+    /**
+     * 设置斥力
+     * @param {} strength 斥力参数
+     */
+    setStrength(strength) {
+        this.strength = strength;
+    }
+
+    getLinkData(){
+        const links = this.g.selectAll("line").data();
+        const data = [];
+
+        for (const link of links) {
+            data.push(link.source.id);
+            data.push(link.target.id);
+        }
+
+        return data;
+    }
+
+    getAllNode(){
+        const nodes =  this.g.selectAll('.node');
+        const data = [];
+        for (const node of nodes){
+            data.push(node.id);
+        }
+        return data;
+    }
+
+    /**
+     * 绘图接口
+     * @param {} nodes 顶点集合
+     * @param {} links 顶点关系集合
+     */
+    drawChart(nodes, links) {
+
+        if (!this.g) {
+            this.g = this.svg.append("g");
+        }
+
+        const color = this.color;
+        this.simulation = d3
+            .forceSimulation(nodes)
+            .force(
+                "link",
+                d3.forceLink(links).id((d) => d.id)
+            )
+            .force("charge", d3.forceManyBody().strength(-this.strength))
+            .force("center", d3.forceCenter());
+        const simulation = this.simulation;
+
+        //绘制svg
+        this.setSvg();
+
+        //绘制连接线标签
+        const linkLabel = this.drawLinkLabel(links);
+
+        //绘制连接线
+        const link = this.drawLink(links);
+
+        //绘制表格
+        this.table = this.drawTable();
+
+        //绘制节点
+        const node = this.drawNode(simulation, color, nodes);
+
+        //位置计算
+        simulation.on("tick", () => { this.drawSimulation(node, link, linkLabel) });
+
+        //绘制图例
+        const nodeLabels = Array.from(new Set(nodes.map((node) => node.label)));
+        this.drawLegend(color, nodeLabels);
+
+        //设置缩放
+        this.setZoom();
+
+    }
+
+    /**
+     * 新增顶点
+     * @param {} nodes 顶点集合
+     * @param {} links 顶点关系集合
+     * @returns 是否添加成功
+     */
+    addChart(nodes, links) {
+
+        const color = this.color;
+        const simulation = this.simulation;
+
+        //计算未加载的连接线
+        const haslinks = this.g.selectAll("line").data();
+        const haslinkdata = haslinks.map(d => ({ source: d.source, target: d.target }));
+
+        let filterlink = links.filter(d => {
+            const exists = haslinkdata.find(hd => {
+                return hd.source.id != d.source || hd.target.id != d.target;
+            });
+            return exists;
+        });
+
+        if (haslinks.length === 0) {
+            filterlink = links;
+        }
+
+        //计算未加载的顶点
+        const hasNodes = this.g.selectAll('.node').nodes();
+        const hasnodedata = hasNodes.map(node => node.id);
+        const filternodes = [];
+        for (const curnode of nodes) {
+            if (!hasnodedata.includes(curnode.id)) {
+                filternodes.push(curnode);
+            }
+        }
+
+        if (filternodes.length === 0) {
+            return false;
+        }
+
+        //绘制标签
+        this.drawLinkLabel(filterlink);
+
+        //绘制连接线
+        this.drawLink(filterlink);
+
+        //绘制顶点
+        this.drawNode(simulation, color, filternodes);
+
+        // 将所有节点重新添加到力学模拟中
+        const allnode = this.g.selectAll(".node");
+        const alllinkLabel = this.g.selectAll(".link-label");
+        const alllink = this.g.selectAll("line");
+        const nodedata = allnode.data();
+        const linkdata = alllink.data();
+
+        //并重新绑定tick事件
+        simulation.nodes(nodedata)
+            .force("link", d3.forceLink(linkdata).id(d => d.id))
+            .on("tick", () => { this.drawSimulation(allnode, alllink, alllinkLabel) })
+            .alpha(1)
+            .restart();
+
+        //绘制图例
+        const nodeLabels = Array.from(new Set(nodedata.map((node) => node.label)));
+        this.drawLegend(color, nodeLabels);
+
+        return true;
+    }
+
+    /**
+     * 定位顶点
+     * @param {} name 顶点名称
+     * @returns 
+     */
+    locateNode(name) {
+        if (!this.g)
+            return false;
+
+        const nodes = this.g.selectAll(".node").nodes();
+        const targetNode = nodes.find(node => node.id === name);
+
+        if (targetNode) {
+            const data = targetNode.__data__;
+            const x = - data.x;
+            const y = - data.y;
+            const id = targetNode.id;
+            this.zoom.transform(this.svg, d3.zoomIdentity.translate(x, y));
+
+            const allnode = this.g.selectAll(".node");
+            allnode.classed("highlighted", d => d.id === id)
+                .select("circle")
+                .style("stroke-width", d => (d.id === id ? '8px' : '0px'));
+
+            return true;
+        }
+        else {
+            return false;
+        }
+    }
+
+    resetCentor() {
+        this.zoom.transform(this.svg, d3.zoomIdentity.translate(0, 0));
+    }
+
+    setZoom() {
+        const svg = this.svg;
+        const g = this.g;
+
+        // 1. 获取 SVG 图形的宽度和高度
+        const svgWidth = svg.node().getBoundingClientRect().width;
+        const svgHeight = svg.node().getBoundingClientRect().height;
+
+        // 2.设置缩放范围和初始缩放比例
+        this.zoom.scaleExtent([0.1, 10]).on("zoom", zoomed);
+        svg.call(this.zoom);
+        this.resetCentor();
+
+        function zoomed() {
+            const transform = d3.zoomTransform(svg.node());
+            const scale = transform.k;
+            const translateX = transform.x + (svgWidth * scale) / 2;
+            const translateY = transform.y + (svgHeight * scale) / 2;
+            g.attr("transform", d3.zoomIdentity.translate(translateX, translateY).scale(scale));
+        }
+    }
+
+    /**
+     * 设置svg属性
+     */
+    setSvg() {
+        this.g
+            .append("defs")
+            .selectAll("marker")
+            .data(["arrow"])
+            .enter()
+            .append("marker")
+            .attr("id", (d) => d)
+            .attr("markerWidth", 10)
+            .attr("markerHeight", 10)
+            .attr("markerUnits", "userSpaceOnUse")
+            .attr("viewBox", "0 -5 10 10")
+            .attr("refX", 45)
+            .attr("refY", 0)
+            .attr("orient", "auto")
+            .append("path")
+            .attr("d", "M0,-5L10,0L0,5")
+            .attr("fill", "gray")
+            .attr("transform", "translate(0,0)");
+    }
+
+    /**
+     * 绘制图例
+     * @param {} color 颜色集合
+     * @param {} nodeLabels 标签集合
+     */
+    drawLegend(color, nodeLabels) {
+
+        this.svg.selectAll(".legend").remove();
+        const legend = this.svg
+            .append("g")
+            .attr("class", "legend")
+            .attr("transform", "translate(10,10)");
+
+        // 循环添加每个图例项
+        nodeLabels.forEach((label, index) => {
+            const legendItem = legend
+                .append("g")
+                .attr("class", "legend-item")
+                .attr("transform", `translate(0,${index * 30})`);
+
+            legendItem
+                .append("rect")
+                .attr("x", 0)
+                .attr("y", 0)
+                .attr("width", 60)
+                .attr("height", 20)
+                .attr("selected", 1)
+                .attr("label", label)
+                .attr("color", color(label))
+                .style("fill", color(label))
+                .style("stroke", "black")
+                .on("click", handleLegendItemClick);
+
+            legendItem
+                .append("text")
+                .attr("x", 65)
+                .attr("y", 15)
+                .text(label)
+                .attr("text-anchor", "start")
+                .attr("font-size", 15);
+
+        });
+
+        const g = this.g;
+        function handleLegendItemClick() {
+            const itemRect = d3.select(this);
+            const isSelect = itemRect.attr("selected");
+            const label = itemRect.attr("label");
+            const nodes = g.selectAll(".node");
+            const links = g.selectAll("line");
+            const linkLabels = g.selectAll(".link-label");
+
+            if (1 == isSelect) {
+                itemRect
+                    .style("fill", "white")
+                    .attr("selected", 0);
+                nodes.filter(d => d.label === label).style("display", "none");
+                links.filter(d => d.source.label === label || d.target.label === label).style("display", "none");
+                linkLabels.filter(d => d.source.label === label || d.target.label === label).style("display", "none");
+            }
+            else {
+                const color = itemRect.attr("color");
+                itemRect
+                    .style("fill", color)
+                    .attr("selected", 1);
+                nodes.filter(d => d.label === label).style("display", "block");
+                links.filter(d => d.source.label === label || d.target.label === label).style("display", "block");
+                linkLabels.filter(d => d.source.label === label || d.target.label === label).style("display", "block");
+            }
+        }
+    }
+
+    /**
+     * 绘制顶点
+     * @param {} simulation 模拟器
+     * @param {} color 颜色集合
+     * @param {} nodes 顶点集合
+     * @returns 顶点
+     */
+    drawNode(simulation, color, nodes) {
+
+        const table = this.table;
+        const node = this.g
+            .append("g")
+            .selectAll("g")
+            .data(nodes)
+            .enter()
+            .append("g")
+            .attr('class', 'node')
+            .attr('id', (d) => d.id)
+            .attr("label", (d) => d.label)
+            .call(this.drag(simulation))
+            .on("click", (event, d) => handClick.call(this, event, d));
+
+        node
+            .append("circle")
+            .attr("r", 35)
+            .attr("fill", (d) => color(d.label))
+            .attr("class","circle")
+            .style('stroke', 'rgba(255, 210, 0)')
+            .style('stroke-width', '0px');
+
+        node
+            .append("text")
+            .attr("dx", 0)
+            .attr("dy", ".35em")
+            .style("fill", "white")
+            .style("font-size", "12px")
+            .style("text-anchor", "middle")
+            .text((d) => this.truncateText(d.name, 5));
+
+        function handClick(event, target) {
+            const id = target.id;
+            const name = target.name;
+            const label = target.label;
+            const properties = JSON.parse(target.properties);
+            this.id = target.id;
+            this.orinode = name
+            const data = [
+                { key: "名称:", value: name },
+                { key: "标签:", value: label },
+                { key: "x:", value: Math.round(target.x) },
+                { key: "y:", value: Math.round(target.y) }
+            ];
+
+            // 遍历properties并添加到data
+            for (let key in properties) {
+                data.push({ key: `${key}:`, value: properties[key] });
+            }
+
+            table.selectAll("g.row").remove();
+
+            // 创建表格行
+            const rows = table
+                .selectAll("g.row")
+                .data(data)
+                .enter()
+                .append("g")
+                .attr("class", "row")
+                .attr("transform", (d, i) => `translate(0, ${i * 30 + 20})`);
+
+            // 创建单元格并填充数据
+            rows
+                .selectAll("text")
+                .data((d) => [d.key, d.value])
+                .enter()
+                .append("text")
+                .attr("x", (d, i) => i * 120)
+                .text((d) => d)
+                .style("font-size", "16px")
+                .style("font-weight", "bold");
+
+            const allnode = this.g.selectAll(".node");
+            allnode.classed("highlighted", d => d.id === id)
+                .select("circle")
+                .style("stroke-width", d => (d.id === id ? '8px' : '0px'));
+
+            const alllink = this.g.selectAll("line");
+            alllink
+                .attr("stroke", (link) => {
+                    if (link.source.id == id) {
+                        return "red";
+                    }
+                    else if (link.target.id == id) {
+                        return "blue";
+                    }
+                    else {
+                        return "gray";
+                    }
+                });
+
+            event.stopPropagation(); // 阻止事件冒泡
+        }
+
+        return node;
+    }
+
+    /**
+     * 绘制连接线
+     * @param {} links 顶点关系集合
+     * @returns 连接线
+     */
+    drawLink(links) {
+        const link = this.g
+            .insert("g", ":first-child")
+            .selectAll("line")
+            .data(links)
+            .enter()
+            .append("line")
+            .attr("stroke", "gray")
+            .attr("marker-end", "url(#arrow)")
+
+        return link;
+    }
+
+    addLink(links) {
+        const link = this.drawlinks(links);
+        link
+            .filter((d, i, arr) => {
+                // 判断是否有重复线
+                const source = d.source.id;
+                const target = d.target.id;
+                for (let j = 0; j < i; j++) {
+                    const link = arr[j];
+                    if ((link.source.id === source && link.target.id === target) ||
+                        (link.source.id === target && link.target.id === source)) {
+                        return false;
+                    }
+                }
+                return true;
+            });
+        return link;
+    }
+
+    /**
+     * 绘制顶点标签
+     * @param {} links 顶点关系集合
+     * @returns 顶点标签
+     */
+    drawLinkLabel(links) {
+        const linkLabel = this.g
+            .insert("g", ":first-child")
+            .selectAll("linklabel")
+            .data(links)
+            .enter()
+            .append("g")
+            .attr("class", "link-label");
+
+        linkLabel
+            .append("rect")
+            .attr("width", 60)
+            .attr("height", 20)
+            .attr("fill", "white")
+            .attr("stroke", "white")
+            .attr("alignment-baseline", "central")
+            .attr("transform", "translate(-30,-10)");
+
+        linkLabel
+            .append("text")
+            .text((d) => d.label)
+            .attr("x", 0)
+            .attr("y", 5)
+            .attr("text-anchor", "middle")
+            .attr("font-size", 12)
+            .attr("fill", "blue");
+
+        return linkLabel;
+    }
+
+    /**
+     * 位置计算
+     * @param {} simulation 模拟器
+     * @param {} node 顶点
+     * @param {} link 连接线
+     * @param {} linkLabel 连接线标签 
+     */
+    drawSimulation(node, link, linkLabel) {
+        link
+            .attr("x1", (d) => d.source.x)
+            .attr("y1", (d) => d.source.y)
+            .attr("x2", (d) => d.target.x)
+            .attr("y2", (d) => d.target.y);
+        node.attr("transform", (d) => `translate(${d.x},${d.y})`);
+
+        linkLabel.attr("transform", (d) => {
+            var x = (d.source.x + d.target.x) / 2;
+            var y = (d.source.y + d.target.y) / 2;
+            const angle =
+                (Math.atan2(d.target.y - d.source.y, d.target.x - d.source.x) *
+                    180) /
+                Math.PI;
+            return `translate(${x}, ${y}) rotate(${angle})`;
+        });
+    }
+
+    drawTable() {
+
+        // 添加一个包含表格的 g 元素
+        const table = this.svg
+            .append("g")
+            .attr("transform", `translate(200, 5)`);
+
+        return table;
+    }
+
+    /**
+     * 替换标签，控制标签显示长度                   
+     * @param {} text 标签
+     * @param {} maxLength 最大长度
+     * @returns 替换标签
+     */
+    truncateText(text, maxLength) {
+        let truncated = text;
+        if (text.length > maxLength) {
+            truncated = text.slice(0, maxLength - 1) + "...";
+        }
+        return truncated;
+    }
+
+    /**
+     * 拖拽捕捉
+     * @param {} simulation 模拟器
+     * @returns 拖拽位置
+     */
+    drag(simulation) {
+        function dragstarted(event) {
+            if (!event.active) simulation.alphaTarget(0.3).restart();
+            event.subject.fx = event.subject.x;
+            event.subject.fy = event.subject.y;
+        }
+        function dragged(event) {
+            event.subject.fx = event.x;
+            event.subject.fy = event.y;
+        }
+        function dragended(event) {
+            if (!event.active) simulation.alphaTarget(0);
+            event.subject.fx = null;
+            event.subject.fy = null;
+        }
+        return d3
+            .drag()
+            .on("start", dragstarted)
+            .on("drag", dragged)
+            .on("end", dragended);
+    }
+
+    clickCancel() {
+        if (this.g) {
+            this.g.selectAll("line").attr("stroke", "gray");
+            this.g.selectAll(".circle").style('stroke-width', '0px'); 
+        }
+
+        if (this.table) {
+            this.table.selectAll("g.row").remove();
+        }
+
+        this.id = '';
+    }
+}
+
+
+export default DrawGraph
+