Từ tài liệu chính thức, chúng ta có thể thấy rằng có hai phương pháp để làm nổi bật các nút liền kề. Mô tả của tài liệu này không rõ ràng lắm và nó không thân thiện lắm với những người mới làm quen với thư viện này.

Các nút đánh dấu tích hợp

Nó được triển khai thông qua các mối quan hệ kích hoạt Hành vi tích hợp sẵn. Hành vi là cơ chế do G6 cung cấp để xác định các sự kiện tương tác trên biểu đồ. Được sử dụng với chế độ tương tác Mode.

mối quan hệ kích hoạt: Khi chuột di chuyển đến một nút, nút đó cũng như các nút và kết nối liên quan trực tiếp của nó sẽ được tô sáng;

• tham số:
  • kích hoạt: 'mouseenter' . Cho biết cơ chế khởi động, có thể chuột vào 、 nhấp chuột ；
  • activeState: 'hoạt động' . Trạng thái nút đang hoạt động, mặc định là tích cực , có thể được sử dụng với thể hiện biểu đồ xxxKiểu trạng thái Kết hợp để đạt được hiệu ứng hình ảnh phong phú.
  • inactiveState: 'không hoạt động' . Trạng thái nút không hoạt động, giá trị mặc định là không hoạt động . Điều tương tự có thể được thực hiện với thể hiện biểu đồ xxxKiểu trạng thái Kết hợp để đạt được hiệu ứng hình ảnh phong phú.
  • Tài liệu cũng đề cập đến hai tham số khác, nhưng chúng không được sử dụng trong trường hợp này và hiện tại sẽ không được giải thích. thiết lập lạiĐã chọn 、 nênCập Nhật(e)
• Cách sử dụng cụ thể

                        
                          hãy drawGraph = document.getElementById("drawGraph"); this.graphWidth = drawGraph.scrollWidth; this.graphHeight = drawGraph.scrollHeight || GraphG = new this.G6.Graph({ container: "drawGraph", width: this .graphWidth, chiều cao: this.graphHeight, chế độ: { mặc định: [ { type: "activate-quan hệ", activeState: 'active', inactiveState: 'inactive' }, ], // default: ['activate-relations'] // Vì cả trạng thái nút hoạt động và không hoạt động đều sử dụng giá trị mặc định nên chúng có thể được viết tắt thành dạng này}, nodeStateStyles:{}, // Định cấu hình kiểu trạng thái nút edgeStateStyles:{}, // Định cấu hình kiểu trạng thái cạnh comboStateStyles:{}, // Định cấu hình kiểu trạng thái nhóm} graphG.data(data); 

                        
                      

Nếu chỉ sử dụng các nút đánh dấu tích hợp, kiểu mặc định sẽ được sử dụng và hiệu ứng hiển thị cuối cùng là:

Làm nổi bật tùy chỉnh

Phương pháp này là để tùy chỉnh trạng thái và thiết lập cũng như xóa thông tin trạng thái của mục tiêu thông qua setItemState và clearItemStates do cá thể cung cấp. Nó cũng cần được kết hợp với xxxStateStyles của thể hiện biểu đồ.

                        
                          graphG = new this.G6.Graph({ container: "drawGraph", width: this.graphWidth, Height: this.graphHeight, nodeStateStyles:{ // Định cấu hình kiểu trạng thái nút. Tôi sẽ viết một kiểu ở đây trước và sẽ có phần đánh dấu hoàn chỉnh sau. lineWidth: 1, fill: "#db4437", đột quỵ: "#db4437", }, }, }, edgeStateStyles:{}, // Định cấu hình kiểu trạng thái cạnh comboStateStyles:{}, // Định cấu hình kiểu trạng thái nhóm} graphG.data (dữ liệu); graphG.render(); graphG.on("combo:mouseenter", (e) => { let edgeItem = e.item graphG.setItemState(edgeItem, 'highlight', true) edgeItem.getEdges().forEach(edge ​​​​=> { graphG.setItemState(edge.getTarget(), 'highlight', true) graphG.setItemState(edge.getSource( ), 'highlight', true) graphG.setItemState(edge, 'highlight', true) }) graphG.paint() graphG.setAutoPaint(true) }); graphG.on('combo:mouseleave', (e) => { graphG.setAutoPaint(false) graphG.getNodes().forEach(node ​​​=> { graphG.clearItemStates(node) ) } ) graphG.getEdges().forEach(edge ​​​​=> { graphG.clearItemStates(edge) }) graphG.getCombos().forEach(combo => { graphG.clearItemStates(combo) }) graphG.paint() graphG.setAutoPaint(true) })


                        
                      

Nếu chỉ sử dụng các nút tô sáng tùy chỉnh thì hiệu ứng hiển thị cuối cùng là:

Giữ nguyên màu gốc khi tùy chỉnh vùng sáng

Từ trường hợp trên, chúng ta có thể thấy rằng khi sử dụng combo:mouseenter, tất cả các cạnh và điểm liên quan đều được đánh dấu và màu sắc của các kết nối được thống nhất. Điều này có thể trái với nhu cầu của chúng ta và chúng ta có thể vẫn muốn giữ nguyên. các kết nối như chúng vốn có vì các màu khác nhau mô tả các kiểu quan hệ trỏ khác nhau giữa hai điểm. Sau đó, khi xử lý các sự kiện chuột tại thời điểm này, bạn cần lấy kiểu gốc của các nút và kết nối.

                        
                          graphG.on("combo:mouseenter", (e) => { let comboItem = e.item; const originStyle = comboItem._cfg.originStyle["circle-combo"].fill; comboItem._cfg.styles.highlight.fill = originStyle; graphG.setItemState(comboItem, "highlight", true); comboItem.getEdges().forEach((edge) => { const originStyle = edge._cfg.originStyle["edge-shape"].stroke; // 获取边edge 原始颜色 edge._cfg.styles.highlight.stroke = originStyle; let edgeSource = edge.getSource(); let edgeTarget = edge.getTarget(); if ( edgeSource._cfg.type === "combo" && edgeSource._cfg.model.id =="100-600" ) { const originStyle = edgeSource._cfg.originStyle["circle-combo"].fill; // Thay đổi giá trị của combo Màu sắc của đối tượng edgeSource._cfg.styles.highlight.fill = originStyle; } if ( edgeTarget._cfg.type === "combo" && edgeTarget._cfg.model.id =="100-600" ) { const originStyle = edgeTarget._cfg.originStyle["circle-combo"].fill; edgeTarget._cfg.styles.highlight.fill = originStyle; } graphG.setItemState(edgeSource, "highlight", true); graphG.setItemState(edgeTarget, "highlight", true); graphG.setItemState(edge, "highlight", true); }); });

      

                        
                      

Khi đó hiệu ứng cuối cùng lúc này là:

Tóm tắt

Trên thực tế, hai phương thức này giống nhau ở chỗ cả hai đều xử lý các trạng thái. Tuy nhiên, một phương thức giúp chúng ta xử lý một số trạng thái và kiểu có thể được sử dụng trực tiếp. Tuy nhiên, thường các kiểu dựng sẵn không nhất quán với những gì chúng ta thực sự sử dụng. vì vậy chúng ta có thể sử dụng kết hợp cả hai, hiệu ứng cuối cùng và bản demo hoàn chỉnh sử dụng các số ngẫu nhiên để mô phỏng các thực thể và mối quan hệ.

Mã trường hợp hoàn chỉnh

Cuối cùng, bài viết này về trực quan hóa—hai phương pháp làm nổi bật các nút lân cận của AntVG6 kết thúc ở đây. Nếu bạn muốn biết thêm về trực quan hóa—hai phương pháp làm nổi bật các nút lân cận của AntVG6, vui lòng tìm kiếm bài viết CFSDN. Hoặc tiếp tục duyệt các bài viết liên quan. ủng hộ blog của tôi trong tương lai! .