Thư viện sắp xếp cấu trúc liên kết python

hình ảnh tế bào. js là một lý thuyết đồ thị mã nguồn mở [a. k. a. mạng] thư viện được viết bằng JS. Bạn có thể sử dụng Cytoscape. js để phân tích và hiển thị biểu đồ

hình ảnh tế bào. js cho phép bạn dễ dàng hiển thị và thao tác với các biểu đồ giàu tính tương tác. Bởi vì Cytoscape. js cho phép người dùng tương tác với biểu đồ và thư viện cho phép khách hàng kết nối với các sự kiện của người dùng, Cytoscape. js dễ dàng được tích hợp vào ứng dụng của bạn, đặc biệt là từ Cytoscape. js hỗ trợ cả trình duyệt dành cho máy tính để bàn, như Chrome và trình duyệt dành cho thiết bị di động, như trên iPad. hình ảnh tế bào. js bao gồm tất cả các cử chỉ mà bạn mong đợi có sẵn, bao gồm chụm để thu phóng, chọn hộp, xoay, v.v.

hình ảnh tế bào. js cũng có ý tưởng phân tích biểu đồ. Thư viện chứa nhiều hàm hữu ích trong lý thuyết đồ thị. Bạn có thể sử dụng Cytoscape. js không đầu trên Node. js để thực hiện phân tích biểu đồ trong thiết bị đầu cuối hoặc trên máy chủ web

hình ảnh tế bào. js là một dự án mã nguồn mở và bất kỳ ai cũng có thể tự do đóng góp. Để biết thêm thông tin, hãy tham khảo GitHub README

Thư viện được tạo ra tại Trung tâm Donnelly tại Đại học Toronto. Nó là sự kế thừa của Cytoscape Web

gói

• npm.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  59
• người gác cổng.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  60
• jspm.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  61

phát hành

• 3. 23
• 3. 22
• 3. 21
• 3. 20
• 3. 19
• 3. 18
• 3. 17
• 3. 16
• 3. 15
• 3. 14
• 3. 13
• 3. 12
• 3. 11
• 3. 10
• 3. 9
• 3. 8
• 3. 7
• 3. 6
• 3. 5
• 3. 4
• 3. 3
• 3. 2
• 3. 1
• 3. 0
• 2. 7
• 2. 6
• 2. 5
• 2. 4
• 2. 3
• 2. 2
• 2. 1
• 2. 0

trích dẫn

Để trích dẫn Cytoscape. js trong một bài báo, vui lòng trích dẫn vấn đề Tin sinh học Oxford

hình ảnh tế bào. js. một thư viện lý thuyết đồ thị để trực quan hóa và phân tích

Franz M, Lopes CT, Huck G, Dong Y, Sumer O, Bader GD

Tin sinh học [2016] 32 [2]. 309-311 xuất bản trực tuyến lần đầu ngày 28 tháng 9 năm 2015 doi. 10. 1093/tin sinh học/btv557 [PDF]

Tóm tắt PubMed

Kinh phí

Tài trợ cho Cytoscape. js và Cytoscape được cung cấp bởi NRNB [U. S. Viện Y tế Quốc gia, Trung tâm Tài nguyên Nghiên cứu Quốc gia cấp số P41 RR031228 và GM103504] và cấp bởi NIH 2R01GM070743 và 1U41HG006623. Các tổ chức sau giúp phát triển Cytoscape

LÀ B. UCSD. MSKCC. Pasteur. nhanh nhẹn. UCSF. Unilever. Toronto. NCIBI. NRNB

mô hình đồ thị

hình ảnh tế bào. js hỗ trợ nhiều trường hợp sử dụng lý thuyết đồ thị khác nhau. Nó hỗ trợ đồ thị có hướng, đồ thị vô hướng, đồ thị hỗn hợp, vòng lặp, đa đồ thị, đồ thị phức hợp [một loại siêu đồ thị], v.v.

Chúng tôi thường xuyên thực hiện các bổ sung và cải tiến cho thư viện và chúng tôi sẵn sàng chấp nhận các yêu cầu tính năng và yêu cầu kéo

Kiến trúc & API

Có hai thành phần trong kiến ​​trúc mà một lập trình viên phải quan tâm để sử dụng Cytoscape. js, lõi [tôi. e. một thể hiện đồ thị] và bộ sưu tập. Trong Cytoscape. js, lõi là điểm vào chính của lập trình viên vào thư viện. Từ lõi, lập trình viên có thể chạy bố cục, thay đổi chế độ xem và thực hiện các thao tác khác trên toàn bộ biểu đồ

Lõi cung cấp một số chức năng để truy cập các phần tử trong biểu đồ. Mỗi hàm này trả về một tập hợp, một tập hợp các phần tử trong biểu đồ. Các chức năng có sẵn trên các bộ sưu tập cho phép lập trình viên lọc bộ sưu tập, thực hiện các thao tác trên bộ sưu tập, duyệt biểu đồ về bộ sưu tập, lấy dữ liệu về các thành phần trong bộ sưu tập, v.v.

Chức năng

Có một số loại mà các chức năng khác nhau có thể được thực thi trên đó và tên biến được sử dụng để biểu thị các loại này trong tài liệu được nêu bên dưới

ShorthandWorks trên

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

62lõi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

63a tập hợp của một hoặc nhiều phần tử [nút và cạnh]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

64a tập hợp của một phần tử đơn lẻ [nút hoặc cạnh]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

65a tập hợp của một hoặc nhiều nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66a tập hợp của một nút duy nhất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

67a tập hợp của một hoặc nhiều cạnh

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

68a tập hợp của một cạnh duy nhất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

69a bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

70một hình ảnh động

Theo mặc định, một hàm trả về một tham chiếu trở lại đối tượng đang gọi để cho phép xâu chuỗi [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

71]. Trừ khi có quy định khác trong tài liệu này, một chức năng có thể kết nối theo cách này trừ khi một giá trị trả về khác được chỉ định. Điều này áp dụng cho cả lõi và bộ sưu tập

Đối với các hàm trả về một giá trị, hãy lưu ý rằng việc gọi một hàm số ít —

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

64,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

68 — trên một tập hợp gồm nhiều phần tử sẽ chỉ trả về giá trị mong đợi cho phần tử đầu tiên

Quyền sở hữu đối tượng

Khi chuyển đối tượng sang Cytoscape. js để tạo các phần tử, hoạt ảnh, bố cục, v.v. , các đối tượng được coi là thuộc sở hữu của Cytoscape. Các đối tượng như phần tử có nhiều cấp độ đối với chúng và việc thực hiện các bản sao sâu của các đối tượng đó mỗi khi chúng được chuyển đến Cytoscape sẽ tạo thêm chi phí. Khi muốn, lập trình viên có thể sao chép các đối tượng theo cách thủ công trước khi chuyển chúng sang Cytoscape. Tuy nhiên, phần lớn thời gian sao chép là không cần thiết đối với hầu hết các lập trình viên.

cử chỉ

hình ảnh tế bào. js hỗ trợ một số cử chỉ

• Lấy và kéo nền để xoay. cảm ứng & máy tính để bàn
• Véo để phóng to. cảm ứng & máy tính để bàn [với bàn di chuột được hỗ trợ]
• Con lăn chuột để phóng to. máy tính để bàn
• Bàn di chuột hai ngón tay lên hoặc xuống để thu phóng. máy tính để bàn
• Nhấn để chọn. cảm ứng & máy tính để bàn
• Nhấn vào nền để bỏ chọn. máy tính để bàn
• Nhấn giữ nền để bỏ chọn. máy tính để bàn & cảm ứng
• Nhiều lựa chọn thông qua phím bổ trợ [shift, command, control, alt] + tap. máy tính để bàn
• lựa chọn hộp. chạm [vuốt ba ngón tay] & màn hình nền [phím bổ trợ + di chuột xuống rồi kéo]
• Lấy và kéo các nút. cảm ứng & máy tính để bàn

Tất cả các hành động cử chỉ có thể được lập trình viên kiểm soát, bật hoặc tắt chúng bất cứ khi nào cần thiết

Chức vụ

Vị trí của một nút đề cập đến điểm trung tâm của cơ thể của nó

Có một sự khác biệt quan trọng để làm cho vị trí. Vị trí có thể là vị trí mô hình hoặc vị trí kết xuất

Vị trí mô hình - như tên gọi của nó - là vị trí được lưu trữ trong mô hình cho một phần tử. Vị trí mô hình của một phần tử không đổi, mặc dù các thay đổi đối với thu phóng và xoay. Các giá trị thuộc tính kiểu số được chỉ định trong tọa độ mô hình, e. g. một nút có chiều rộng 20px sẽ rộng 20 pixel khi thu phóng 1

Vị trí được hiển thị là vị trí trên màn hình so với chế độ xem. Ví dụ: vị trí được hiển thị của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

75 chỉ định một điểm 100 pixel ở bên phải và 100 pixel xuống từ góc trên cùng bên trái của chế độ xem. Vị trí mô hình và vị trí được hiển thị giống nhau ở mức thu phóng 1 và xoay [0, 0]

Vị trí được hiển thị của phần tử thay đổi tự nhiên khi thu phóng và xoay thay đổi, bởi vì vị trí trên màn hình của phần tử trong chế độ xem thay đổi khi áp dụng thu phóng và xoay. Panning luôn được đo bằng tọa độ được hiển thị

Trong tài liệu này, "vị trí" đề cập đến vị trí mô hình trừ khi có quy định khác

Vị trí của nút có thể được đặt thủ công hoặc có thể được đặt tự động bằng cách sử dụng. Bởi vì vị trí của hai nút ảnh hưởng đến độ dài của các cạnh ở giữa chúng, nên một bố cục sẽ đặt độ dài các cạnh một cách hiệu quả

Phần tử JSON

Các ví dụ được đưa ra rằng định dạng phác thảo của các phần tử JSON được sử dụng để tải các phần tử vào Cytoscape. js

Ngoài ra, các phần tử JSON có thể ở định dạng sau, được khóa theo nhóm

nút hợp chất

Các nút hợp chất là một bổ sung cho mô hình đồ thị truyền thống. Nút ghép chứa một số nút con, tương tự như cách phần tử HTML DOM có thể chứa một số phần tử con

Các nút ghép được chỉ định thông qua trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

76 trong phần tử

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

77. Tương tự như trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

78 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

79 của các cạnh, trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

76 thường là bất biến. Cha của nút có thể được chỉ định khi nút được thêm vào biểu đồ và sau thời điểm đó, mối quan hệ cha-con này là bất biến thông qua

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

81. Tuy nhiên, bạn có thể di chuyển các nút con thông qua

Đối với API, các nút phức hợp được xử lý giống như các nút thông thường — ngoại trừ như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

83. Điều này có nghĩa là các hàm lý thuyết đồ thị truyền thống như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

84 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

85 không tạo ra các khoản phụ cấp đặc biệt cho các nút phức hợp, vì vậy bạn có thể cần thực hiện các lệnh gọi API khác nhau tùy thuộc vào trường hợp sử dụng của mình

Ví dụ

Phần này sẽ giúp bạn làm quen với các bước cơ bản cần thiết để bắt đầu sử dụng Cytoscape. js

bao gồm Cytoscape. js

Nếu bạn đang sử dụng môi trường HTML đơn giản [không có hệ thống xây dựng], thì nguồn Cytoscape. js trong một

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

86

hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

7

Để sử dụng Cytoscape. js từ CDN, hãy sử dụng một trong các CDN sau

Vui lòng không liên kết nóng đến các bản sao của Cytoscape. js từ tài liệu — chúng chỉ dành cho demo

Các tệp có sẵn có sẵn theo

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

87 trong gói npm

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  88. Bản dựng UMD được rút gọn với tất cả các phụ thuộc có trong gói. Tệp này hữu ích cho các trang nhỏ, tài liệu bổ sung cho một bài báo học thuật chẳng hạn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  89. Bản dựng UMD không được rút gọn với tất cả các phụ thuộc được bao gồm trong gói. Tệp này hữu ích để gỡ lỗi trên các trang nhỏ, tài liệu bổ sung cho một bài báo học thuật chẳng hạn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  90. Bản dựng ESM [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  91 /

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  92] được rút gọn với tất cả các phụ thuộc được bao gồm trong gói. Tệp này phục vụ mục đích tương tự như tệp ở trên, nhưng nó có thể được nhập dưới dạng mô-đun ES6 mà không cần trình đóng gói

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  93. Một CJS không được rút gọn [Node. js] mà không có bất kỳ gói phụ thuộc đi kèm nào. Điều này được dự định sẽ được Node tự động tiêu thụ. js hoặc một gói như Webpack qua

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  94

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  95. Bản dựng ESM [_______091 /

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  92] không được rút gọn mà không có bất kỳ phụ thuộc đi kèm nào. Điều này được dự định sẽ được Node tự động tiêu thụ. js hoặc một gói như Webpack qua

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  98

Biểu định kiểu của bạn có thể bao gồm nội dung nào đó như thế này [giả sử một phần tử DOM có ID

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

62 được sử dụng làm vùng chứa]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

Để cài đặt Cytoscape. js qua npm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

2

Để sử dụng Cytoscape. js trong môi trường ESM với npm [e. g. Webpack hoặc Node. js với gói

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

200]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

4

Để sử dụng Cytoscape. js trong môi trường CommonJS như Node. js

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

5

Để sử dụng Cytoscape. js với AMD/Yêu cầu. js

Để cài đặt Cytoscape. js thông qua Bower

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

6

Để cài đặt Cytoscape. js qua Sao băng/Khí quyển

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

2

hình ảnh tế bào. js hỗ trợ các môi trường với ES5 hoặc mới hơn, vì nó được biên dịch bởi Babel và nó chỉ sử dụng các tính năng cơ bản của thư viện chuẩn. Phát hiện tính năng được sử dụng cho các tính năng tùy chọn giúp cải thiện hiệu suất. Tuy nhiên, một phiên bản tương lai của Cytoscape. js có thể yêu cầu phiên bản cập nhật hơn của thư viện chuẩn. Bạn có thể muốn sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

201 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

202 nếu bạn muốn hỗ trợ các trình duyệt cũ trong tương lai

Khởi tạo

Một ví dụ về Cytoscape. js tương ứng với một biểu đồ. Bạn có thể tạo một ví dụ như sau

Bạn có thể chuyển một phiên bản jQuery dưới dạng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

203 để thuận tiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

1

Nếu bạn đang chạy Cytoscape. js trong Nút. js hoặc chạy vô định, bạn sẽ không chỉ định tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

203. Trong các môi trường không đầu hoàn toàn như Node. js, một phiên bản sẽ tự động không đầu. Để chạy một phiên bản headless [e. g. trong trình duyệt], bạn có thể chỉ định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

205 là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206

Chỉ định các tùy chọn cơ bản

Để trực quan hóa, thường nên đặt các tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

203, , và

Bước tiếp theo

Bây giờ bạn đã có một phiên bản lõi [biểu đồ] với các tùy chọn cơ bản, hãy khám phá. Đó là điểm vào của bạn đối với tất cả các tính năng trong Cytoscape. js

Nếu bạn có câu hỏi về mã về Cytoscape. js, vui lòng đăng câu hỏi của bạn lên Stackoverflow

Đối tượng cốt lõi là giao diện của bạn với biểu đồ. Đây là điểm vào Cytoscape của bạn. js. Tất cả các tính năng của thư viện được truy cập thông qua đối tượng này

Khởi tạo

Khởi tạo

Một đồ thị có thể được tạo ra như sau

Bạn có thể khởi tạo lõi mà không cần bất kỳ tùy chọn nào. Nếu bạn muốn sử dụng Cytoscape dưới dạng trực quan hóa, thì cần có phần tử DOM

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

203, e. g

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

7

Lưu ý rằng để đảm bảo việc sử dụng phông chữ tùy chỉnh [WOFF/WOFF2], các phông chữ được đề cập phải được tải trước khi Cytoscape được khởi tạo

Lưu ý rằng Cytoscape. js sẽ in thông báo cảnh báo ra console giúp lập trình viên tránh mắc lỗi. Nếu bạn muốn tắt các thông báo này, hãy gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

212 để tắt hoàn toàn các cảnh báo. Bạn có thể bật lại chúng bằng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

213 và bạn có thể lấy trạng thái hiện tại bằng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

214. Bạn nên bật cảnh báo ít nhất cho các bản dựng phát triển ứng dụng của mình

Các phần sau đây đi qua các tùy chọn chi tiết hơn

tùy chọn khởi tạo

Một ví dụ về Cytoscape. js có một số tùy chọn có thể được đặt khi khởi tạo. Chúng được phác thảo bên dưới với các giá trị mặc định của chúng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

1

Tùy chọn rất thường được sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

203. Một phần tử HTML DOM trong đó biểu đồ sẽ được hiển thị. Điều này là không xác định nếu Cytoscape. js được chạy không đầu. Vùng chứa dự kiến ​​sẽ là một div trống;

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

208. Một mảng của. Để thuận tiện, tùy chọn này có thể được chỉ định thay thế như một lời hứa giải quyết các phần tử JSON

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

209. Được sử dụng để tạo kiểu cho biểu đồ. Để thuận tiện, tùy chọn này có thể được chỉ định thay thế như một lời hứa giải quyết biểu định kiểu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

69. Một đối tượng đơn giản chỉ định các tùy chọn bố cục. Bố cục nào được chạy ban đầu được chỉ định bởi trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

219. Tham khảo a để biết các tùy chọn mà nó hỗ trợ. Nếu bạn muốn tự chỉ định vị trí nút của mình trong JSON phần tử, bạn có thể sử dụng bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

220 — theo mặc định, bố cục này không đặt bất kỳ vị trí nào, để các nút của bạn ở vị trí hiện tại của chúng [i. e. được chỉ định trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

221 tại thời điểm khởi tạo]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

77. Một đối tượng đơn giản có chứa [i. e. dữ liệu không thuộc về bất kỳ nút hoặc cạnh cụ thể nào]

Trạng thái khung nhìn ban đầu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

223. Mức thu phóng ban đầu của biểu đồ. Đảm bảo tắt các tùy chọn thao tác chế độ xem, chẳng hạn như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

224, trong bố cục của bạn để nó không bị ghi đè khi áp dụng bố cục. Bạn có thể đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

225 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

226 để đặt giới hạn về mức thu phóng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

227. Vị trí panning ban đầu của biểu đồ. Đảm bảo tắt các tùy chọn thao tác chế độ xem, chẳng hạn như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

224, trong bố cục của bạn để nó không bị ghi đè khi áp dụng bố cục

tùy chọn tương tác

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

229. Giới hạn tối thiểu về mức thu phóng của biểu đồ. Chế độ xem không thể được thu nhỏ hơn mức thu phóng này

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

230. Giới hạn tối đa về mức thu phóng của biểu đồ. Không thể thu nhỏ chế độ xem lớn hơn mức thu phóng này

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

231. Thu phóng biểu đồ có được bật hay không, cả theo sự kiện của người dùng và theo chương trình

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

232. Cho dù sự kiện người dùng [e. g. con lăn chuột, pinch-to-zoom] được phép phóng to biểu đồ. Các thay đổi có lập trình để thu phóng không bị ảnh hưởng bởi tùy chọn này

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

233. Việc xoay biểu đồ có được bật hay không, cả theo sự kiện của người dùng và theo chương trình

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

234. Cho dù sự kiện người dùng [e. g. kéo nền đồ thị] được phép xoay đồ thị. Các thay đổi có lập trình đối với pan không bị ảnh hưởng bởi tùy chọn này

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

235. Cho dù lựa chọn hộp [i. e. kéo một lớp phủ hộp xung quanh và thả nó ra để chọn] đã được bật. Nếu được bật trong khi tính năng xoay cũng được bật, người dùng phải sử dụng phím bổ trợ [shift, alt, control hoặc lệnh] để sử dụng lựa chọn hộp

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

236. Một chuỗi biểu thị hành vi lựa chọn từ đầu vào của người dùng. Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

237, một lựa chọn mới do người dùng thực hiện sẽ thêm vào tập hợp các phần tử hiện được chọn. Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

238, một lựa chọn mới do người dùng thực hiện sẽ trở thành toàn bộ tập hợp các phần tử hiện được chọn [i. e. các phần tử trước đó không được chọn]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

239 &

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

240. Một số nguyên không âm cho biết khoảng cách tối đa cho phép mà người dùng có thể di chuyển trong khi thực hiện thao tác chạm, trên thiết bị cảm ứng và thiết bị để bàn tương ứng. Điều này giúp người dùng khai thác dễ dàng hơn. Các giá trị này có giá trị mặc định hợp lý, vì vậy bạn không nên thay đổi các tùy chọn này trừ khi bạn có lý do chính đáng để làm như vậy. Giá trị lớn gần như chắc chắn sẽ có hậu quả không mong muốn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

241. Theo mặc định, các nút có nên được hủy hợp nhất [người dùng không thể lấy được] hay không [nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206, sẽ ghi đè trạng thái nút riêng lẻ]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

243. Theo mặc định, các nút có nên bị khóa [hoàn toàn không thể kéo được] hay không [nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206, sẽ ghi đè trạng thái nút riêng lẻ]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

245. Theo mặc định, các nút có nên được bỏ chọn hay không [trạng thái lựa chọn không thay đổi] [nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206, sẽ ghi đè trạng thái phần tử riêng lẻ]

Tùy chọn kết xuất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

247. Một tùy chọn tiện lợi khởi tạo phiên bản để chạy không đầu. Bạn không cần thiết lập điều này trong các môi trường hoàn toàn không có đầu [e. g. Nút. js]. Tuy nhiên, sẽ rất hữu ích khi đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

248 nếu bạn muốn có phiên bản không đầu trong trình duyệt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

249. Một boolean cho biết có nên sử dụng kiểu dáng hay không. Đối với không đầu [tôi. e. bên ngoài trình duyệt], hiển thị là không cần thiết và do đó, kiểu dáng cũng không cần thiết — do đó tăng tốc mã của bạn. Bạn có thể kích hoạt kiểu dáng theo cách thủ công trong môi trường không đầu nếu bạn cần nó cho trường hợp đặc biệt. Lưu ý rằng không nên tắt kiểu nếu bạn định hiển thị biểu đồ. Cũng lưu ý rằng phải được gọi để dọn sạch một phiên bản không đầu, kích hoạt kiểu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

251. Gợi ý kết xuất khi được đặt thành

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206 sẽ khiến trình kết xuất không hiển thị các cạnh trong khi chế độ xem đang được thao tác. Điều này làm cho thao tác xoay, thu phóng, kéo, v.v. phản ứng nhanh hơn đối với các biểu đồ lớn. Tùy chọn này hiện đang được thảo luận rộng rãi, do các cải tiến về hiệu suất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

253. Một gợi ý kết xuất khi được đặt thành

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206 sẽ làm cho trình kết xuất sử dụng kết cấu trong khi xoay và thu phóng thay vì vẽ các phần tử, làm cho các biểu đồ lớn phản ứng nhanh hơn. Tùy chọn này hiện đang được thảo luận rộng rãi, do các cải tiến về hiệu suất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

255. Gợi ý kết xuất khi được đặt thành

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206 sẽ làm cho trình kết xuất sử dụng hiệu ứng làm mờ chuyển động để làm cho quá trình chuyển đổi giữa các khung có vẻ mượt mà hơn. Điều này có thể tăng hiệu suất cảm nhận cho một biểu đồ lớn. Tùy chọn này hiện đang được thảo luận rộng rãi, do các cải tiến về hiệu suất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

257. Khi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

258, giá trị này kiểm soát độ mờ của các khung mờ chuyển động. Giá trị cao hơn làm cho hiệu ứng mờ chuyển động rõ rệt hơn. Tùy chọn này hiện đang được thảo luận rộng rãi, do các cải tiến về hiệu suất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

259. Thay đổi độ nhạy của bánh xe cuộn khi thu phóng. Đây là một công cụ sửa đổi nhân. Vì vậy, giá trị từ 0 đến 1 làm giảm độ nhạy [thu phóng chậm hơn] và giá trị lớn hơn 1 làm tăng độ nhạy [thu phóng nhanh hơn]. Tùy chọn này được đặt thành giá trị lành mạnh hoạt động tốt cho chuột chính [Apple, Logitech, Microsoft] trên Linux, Mac và Windows. Nếu giá trị mặc định có vẻ quá nhanh hoặc quá chậm trên hệ thống cụ thể của bạn, thì bạn có thể có cài đặt chuột không phải mặc định trong HĐH hoặc chuột thích hợp. Bạn không nên thay đổi giá trị này trừ khi ứng dụng của bạn chỉ hoạt động trên phần cứng cụ thể. Nếu không, bạn có nguy cơ thu phóng quá chậm hoặc quá nhanh đối với hầu hết người dùng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

260. Ghi đè tỷ lệ pixel màn hình bằng giá trị được đặt thủ công [khuyến nghị ______4261, nếu được đặt]. Điều này có thể được sử dụng để tăng hiệu suất trên các màn hình mật độ cao bằng cách giảm diện tích hiệu quả cần được hiển thị, mặc dù điều này ít cần thiết hơn trên các bản phát hành trình duyệt gần đây hơn. Nếu bạn muốn sử dụng tỷ lệ pixel thực tế của phần cứng, bạn có thể đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

262 [mặc định]

Thao tác đồ thị

Thêm các phần tử vào biểu đồ và trả về chúng

Thêm một phần tử được chỉ định vào biểu đồ

• Một đối tượng đơn giản chỉ định phần tử

Thêm các phần tử được chỉ định vào biểu đồ

• Một mảng các phần tử được chỉ định bởi các đối tượng đơn giản

Thêm các phần tử được chỉ định vào biểu đồ

• Một bộ sưu tập các yếu tố

Thông tin chi tiết

Nếu các đối tượng phần tử đơn giản được sử dụng, thì phải tuân theo

Nếu một tập hợp các phần tử hiện có được chỉ định cho một phiên bản lõi khác, thì các bản sao của các phần tử đó sẽ được thêm vào, điều này cho phép các phần tử được chuyển một cách hiệu quả giữa các phiên bản của Cytoscape. js

ví dụ

Thêm một nút từ một đối tượng đơn giản

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

0

Thêm các nút và cạnh vào biểu đồ dưới dạng các đối tượng đơn giản

Xóa các phần tử khỏi biểu đồ và trả lại chúng

Xóa các phần tử đã chỉ định

• Một bộ sưu tập các yếu tố để loại bỏ

Xóa các phần tử trong biểu đồ khớp với bộ chọn đã chỉ định

• Các phần tử phù hợp với bộ chọn này đã bị xóa

Thông tin chi tiết

Mặc dù các phần tử được chỉ định cho chức năng này bị xóa khỏi biểu đồ nhưng chúng vẫn có thể tồn tại trong bộ nhớ. Tuy nhiên, hầu như tất cả các chức năng sẽ không hoạt động trên các phần tử đã xóa. Ví dụ: hàm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

85 sẽ không thành công đối với phần tử đã xóa. Một phần tử bên ngoài ngữ cảnh của biểu đồ không thể có một vùng lân cận được xác định. Một phần tử bị loại bỏ chỉ tồn tại để bạn có thể khôi phục phần tử đó trở lại phiên bản lõi ban đầu hoặc phiên bản mới

ví dụ

Xóa một phần tử

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

1

Xóa bộ sưu tập

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

2

Xóa các phần tử khớp với bộ chọn

Trả về một bộ sưu tập mới, trống hoặc có các phần tử mới ở trạng thái đã xóa

C y. bộ sưu tập[ , eleObjs, tùy chọn ]

Tạo bộ sưu tập với các phần tử mới ở trạng thái đã xóa

• Các yếu tố được tạo ra

• tùy chọn

  Các tùy chọn cho bộ sưu tập

  • loại bỏ

    Giá trị trung thực đặt xem các phần tử ở trạng thái bị xóa [đúng] hay được thêm vào biểu đồ [sai, mặc định]

Thông tin chi tiết

Chức năng này rất hữu ích để xây dựng các bộ sưu tập

ví dụ

Giữ một bộ sưu tập các nút đã được nhấp

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

3

Tạo một tập hợp các nút mới chưa được thêm vào biểu đồ

Nhận một phần tử từ ID của nó theo cách rất hiệu quả

• Tôi

  ID của phần tử cần lấy

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

4

Sử dụng bí danh ngắn hơn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

5

Nhận các phần tử trong biểu đồ khớp với bộ chọn hoặc chức năng lọc

Nhận các phần tử trong biểu đồ khớp với bộ chọn đã chỉ định

• Bộ chọn các phần tử phải khớp

Nhận các phần tử trong biểu đồ khớp với bộ chọn đã chỉ định

• Bộ chọn các phần tử phải khớp

Nhận các nút trong biểu đồ khớp với bộ chọn đã chỉ định

• Bộ chọn các nút phải khớp

Nhận các cạnh trong biểu đồ khớp với bộ chọn đã chỉ định

• Bộ chọn các cạnh phải khớp

Nhận các phần tử trong biểu đồ khớp với bộ chọn đã chỉ định

• Bộ chọn các phần tử phải khớp

C y. bộ lọc[ , hàm[ele, i, ele] ]

Nhận các phần tử trong biểu đồ khớp với chức năng bộ lọc đã chỉ định

• hàm [ele, i, ele]

  Hàm lọc trả về true cho các phần tử sẽ được trả về

  • Phần tử hiện tại đang được xem xét để lọc

  • i

    Bộ đếm được sử dụng để lặp qua các phần tử trong biểu đồ

  • Tập hợp các phần tử được lọc

Thông tin chi tiết

Nếu không có phần tử nào trong biểu đồ khớp với bộ chọn, một giá trị trống sẽ được trả về

Hàm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

264 đóng vai trò là bí danh của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

265. Nó cho phép bạn gõ ít ký tự hơn. Nó tương tự như bí danh jQuery

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

266 được sử dụng để tìm kiếm tài liệu

ví dụ

Nhận các nút có trọng số lớn hơn 50

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

6

Nhận các cạnh với nút nguồn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

267

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

7

Nhận tất cả các nút và cạnh có trọng số lớn hơn 50

Nhận các nút có trọng số lớn hơn 50 với chức năng lọc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

8

Cho phép thao tác các phần tử mà không cần kích hoạt nhiều phép tính kiểu hoặc nhiều lần vẽ lại

• hàm số[]

  Một cuộc gọi lại trong đó bạn có thể thực hiện cập nhật hàng loạt cho các phần tử

Bắt đầu tạo khối theo cách thủ công [hữu ích cho các trường hợp không đồng bộ]

Kết thúc xử lý thủ công [hữu ích cho các trường hợp không đồng bộ]

Thông tin chi tiết

Thông thường, khi bạn sửa đổi các phần tử, mỗi sửa đổi có thể kích hoạt tính toán kiểu dáng và vẽ lại — tùy thuộc vào thời gian vẽ lại. Ví dụ: điều sau đây sẽ gây ra hai phép tính kiểu và ít nhất một lần rút

Đây không phải là vấn đề đối với một số thao tác trên một số phần tử, nhưng đối với nhiều thao tác trên nhiều phần tử, bạn kết thúc với các phép tính kiểu dư thừa và có thể là các bản vẽ lại dư thừa. Trong trường hợp xấu nhất, bạn có bản cập nhật và bản vẽ lại kiểu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

268 — và cả bản cập nhật và bản vẽ lại kiểu dáng đều có thể tốn kém. Trong trường hợp xấu nhất khi sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

269, bạn giới hạn các bản cập nhật kiểu ở

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

270 và bạn giới hạn các bản vẽ lại chỉ một

Do đó, chức năng này rất hữu ích để thực hiện nhiều thay đổi đối với các phần tử cùng một lúc. Khi chức năng gọi lại được chỉ định hoàn tất, chỉ những phần tử yêu cầu nó được cập nhật kiểu và trình kết xuất thực hiện nhiều nhất một lần vẽ lại

Điều này giúp sửa đổi các phần tử rất hiệu quả, nhưng nó có một số lưu ý trong một đợt

• Bạn không thể đọc kiểu hoặc kích thước phần tử một cách đáng tin cậy [có thể nó đã thay đổi hoặc các giá trị được tính toán có thể đã lỗi thời]
• Bạn có thể không muốn sử dụng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  271 et cetera vì chúng buộc bỏ qua kiểu thay vì tính toán lại
• Bạn không thể áp dụng bất kỳ thao tác phụ thuộc vào kiểu nào trong lô nếu bạn đã sửa đổi kiểu trong cùng một lô. Các hoạt động phụ thuộc vào phong cách phổ biến bao gồm
  • Cách trình bày.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    272,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    273, v.v.
  • phong cách đọc.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    274,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    275, v.v.
  • Kích thước đọc.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    276,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    277, v.v.
  • hoạt hình.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    278,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    279, v.v.
  • Và như thế…

Một lô phải tương ứng với một thao tác trực quan. Thông thường, một lô chỉ nên chứa các cuộc gọi đến các chức năng sau

• Đang sửa đổi trạng thái. ________ 4280, ________ 4281, ________ 4282, ________ 4283, v.v.
• xây dựng bộ sưu tập.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  284,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  285,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  286, v.v.
• so sánh. ________ 4287, ________ 4288, v.v.
• lặp lại.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  289,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  290, v.v.
• đi ngang.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  291,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  292, v.v.
• thuật toán.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  84,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  294, v.v.

ví dụ

phong cách đồng bộ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

9

phong cách không đồng bộ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

20

Đính kèm phiên bản vào vùng chứa được chỉ định để trực quan hóa

• thùng đựng hàng

  Một phần tử HTML DOM trong đó biểu đồ sẽ được hiển thị

Thông tin chi tiết

Nếu phiên bản cốt lõi không có phần đầu trước khi gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

295, thì phiên bản đó sẽ không còn phần đầu nữa và hình ảnh trực quan sẽ được hiển thị trong vùng chứa đã chỉ định. Nếu phiên bản lõi không có đầu trước khi gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

295, thì hình ảnh trực quan hóa được hoán đổi từ vùng chứa trước đó sang vùng chứa được chỉ định

Xóa phiên bản khỏi vùng chứa hiện tại của nó

Thông tin chi tiết

Hàm này đặt thể hiện thành không đầu sau khi ngắt kết nối khỏi vùng chứa hiện tại

Một chức năng tiện lợi để hủy bỏ thể hiện một cách rõ ràng

Thông tin chi tiết

Hàm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

250 không cần thiết nhưng có thể thuận tiện trong một số trường hợp. Nó dọn sạch các tham chiếu và vòng lặp hiển thị sao cho bộ nhớ được sử dụng bởi một phiên bản có thể được thu gom rác

Nếu bạn xóa phần tử DOM vùng chứa khỏi trang, thì phiên bản sẽ tự động được dọn sạch. Tương tự, gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

250 thực hiện việc dọn dẹp này và xóa tất cả phần tử con của vùng chứa khỏi trang

Khi chạy Cytoscape. js không đầu, việc sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

250 chỉ cần thiết nếu bạn đã bật rõ ràng chức năng kiểu

Để loại bỏ bộ nhớ được sử dụng bởi một phiên bản, cần phải loại bỏ tất cả các tham chiếu của riêng bạn đến phiên bản đó để nó có thể được thu gom rác

Nhận xem phiên bản của Cytoscape. js đã bị phá hủy hay chưa

Dữ liệu

Đọc và ghi dữ liệu do nhà phát triển xác định được liên kết với biểu đồ

Lấy toàn bộ đối tượng dữ liệu

Nhận một trường dữ liệu cụ thể

• Tên

  Tên của lĩnh vực để có được

Đặt một trường dữ liệu cụ thể

• Tên

  Tên trường cần đặt

• giá trị

  Giá trị để đặt cho trường

Cập nhật nhiều trường dữ liệu cùng lúc thông qua một đối tượng

• đối tượng

  Đối tượng chứa các cặp tên-giá trị để cập nhật trường dữ liệu

Xóa dữ liệu do nhà phát triển xác định được liên kết với các phần tử

Xóa tất cả các trường dữ liệu có thể thay đổi cho các phần tử

Xóa các trường dữ liệu có thể thay đổi được chỉ định cho các phần tử

• tên

  Danh sách các trường được phân tách bằng dấu cách để xóa

hàm số. Chức năng này được thiết kế để sử dụng trong các tiện ích mở rộng

Đặt hoặc nhận dữ liệu bàn di chuột, nơi có thể lưu trữ dữ liệu tạm thời hoặc không phải JSON. Dữ liệu bàn di chuột cấp ứng dụng nên sử dụng không gian tên có tiền tố gạch dưới, chẳng hạn như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

400. Điều này tương tự như phổ biến hơn nhưng đối với dữ liệu toàn cầu đồ thị

Lấy toàn bộ đối tượng bàn di chuột cho lõi

Lấy bàn di chuột tại một không gian tên cụ thể

• không gian tên

  Một chuỗi không gian tên

C y. cào[ , không gian tên, giá trị ]

Đặt bàn di chuột tại một không gian tên cụ thể

• không gian tên

  Một chuỗi không gian tên

• giá trị

  Giá trị để đặt tại không gian tên được chỉ định

hàm số. Chức năng này được thiết kế để sử dụng trong các tiện ích mở rộng

Xóa dữ liệu trên bàn di chuột. Bạn chỉ nên xóa dữ liệu bàn di chuột tại các không gian tên của riêng mình. Điều này tương tự như phổ biến hơn nhưng đối với dữ liệu toàn cầu đồ thị

C y. removeScratch[ , không gian tên ]

Xóa dữ liệu bàn di chuột tại một không gian tên cụ thể

• không gian tên

  Một chuỗi không gian tên

Lưu ý rằng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

402 đặt đối tượng bàn di chuột cho không gian tên đã chỉ định thành

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

404. Điều này cho phép bạn sử dụng các giá trị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

405 có ý nghĩa

Sự kiện

Lắng nghe các sự kiện xảy ra trên lõi

C y. bật[ , sự kiện [, bộ chọn], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn để chỉ định các phần tử mà trình xử lý chạy

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

ví dụ

Lắng nghe các sự kiện nổi lên từ các phần tử khớp với bộ chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66 đã chỉ định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

21

Lắng nghe tất cả các sự kiện nhấn mà lõi nhận được

Nhận một lời hứa được giải quyết khi lõi phát ra sự kiện đầu tiên trong số các sự kiện được chỉ định

C y. PromiseOn[ , sự kiện [, bộ chọn] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn để chỉ định các phần tử mà trình xử lý chạy

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

22

Lắng nghe các sự kiện xảy ra trên lõi và chỉ chạy trình xử lý một lần

C y. một[ , sự kiện [, bộ chọn], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn để chỉ định các phần tử mà trình xử lý chạy

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

Xóa trình xử lý sự kiện trên lõi

C y. removeListener[ , sự kiện [, bộ chọn] [, trình xử lý] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn tương tự được sử dụng để lắng nghe các sự kiện

• trình xử lý [tùy chọn]

  Một tham chiếu đến chức năng xử lý để loại bỏ

ví dụ

Đối với tất cả các xử lý

Đối với một người xử lý cụ thể

Xóa tất cả các trình xử lý sự kiện trên lõi

C y. phát ra[ , sự kiện [, extraParams] ]

• Danh sách các tên sự kiện sẽ phát ra [một chuỗi được phân tách bằng dấu cách hoặc một mảng]

• extraParams [tùy chọn]

  Một mảng các tham số bổ sung để chuyển đến trình xử lý

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

23

Chạy một cuộc gọi lại ngay khi biểu đồ sẵn sàng [i. e. tải dữ liệu ban đầu và hoàn thành bố cục ban đầu]. Nếu biểu đồ đã sẵn sàng, thì cuộc gọi lại được gọi ngay lập tức. Nếu dữ liệu được tải đồng bộ và bố cục được sử dụng là rời rạc/đồng bộ/không hoạt hình/không xác định, thì bạn không cần

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

407

C y. sẵn sàng[ , chức năng[sự kiện] ]

• chức năng [sự kiện]

  Cuộc gọi lại chạy ngay khi biểu đồ sẵn sàng

Thao tác khung nhìn

Nhận phần tử HTML DOM trong đó biểu đồ được hiển thị. Một giá trị null được trả về nếu thể hiện không có đầu

Di chuyển biểu đồ đến trung tâm của một bộ sưu tập

Căn giữa trên tất cả các phần tử trong biểu đồ

Trung tâm trên các yếu tố được chỉ định

• Bộ sưu tập tập trung vào

Thông tin chi tiết

Nếu không có tập hợp nào được chỉ định, thì biểu đồ sẽ được căn giữa trên tất cả các nút và cạnh trong biểu đồ

ví dụ

Căn giữa biểu đồ trên nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

408

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

24

Xoay và thu phóng biểu đồ để vừa với bộ sưu tập

Phù hợp với tất cả các phần tử trong biểu đồ

C y. vừa khít[ [, eles] [, padding] ]

Phù hợp với các yếu tố được chỉ định

• [không bắt buộc]

  Bộ sưu tập phù hợp với

• phần đệm [tùy chọn]

  Số lượng phần đệm [tính bằng pixel được hiển thị] xung quanh biểu đồ [mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  409]

Thông tin chi tiết

Nếu không có tập hợp nào được chỉ định, thì biểu đồ phù hợp với tất cả các nút và cạnh trong biểu đồ

ví dụ

Điều chỉnh biểu đồ trên các nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

408 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

411

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

25

Đặt lại biểu đồ về mức thu phóng mặc định và vị trí xoay

Thông tin chi tiết

Điều này đặt lại chế độ xem về gốc [0, 0] ở mức thu phóng 1

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

26

Nhận hoặc đặt vị trí xoay của biểu đồ

Nhận vị trí xoay hiện tại

C y. pan[ , renderedPosition ]

Đặt vị trí xoay hiện tại

Thông tin chi tiết

Chức năng này di chuyển nguồn gốc của chế độ xem biểu đồ đến vị trí pixel được hiển thị đã chỉ định

ví dụ

Xoay biểu đồ tới [100, 100] pixel được hiển thị

Xoay tương đối biểu đồ theo một vectơ vị trí được hiển thị đã chỉ định

C y. panBy[ , renderedPosition ]

Thông tin chi tiết

Hàm này dịch chuyển khung nhìn tương đối theo vị trí đã chỉ định trong các pixel được hiển thị. Nghĩa là, chỉ định dịch chuyển 100 sang phải có nghĩa là dịch 100 pixel trên màn hình sang phải

ví dụ

Xoay biểu đồ sang bên phải 100 pixel

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

27

Nhận hoặc đặt xem có bật tính năng xoay hay không

Nhận xem panning có được bật hay không

Đặt xem có bật chế độ xoay hay không

• bool

  Một giá trị trung thực cho phép xoay;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

28

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

29

Nhận hoặc đặt xem xoay theo sự kiện của người dùng [e. g. kéo nền biểu đồ] được bật

Nhận xem người dùng panning có được bật hay không

C y. userPanningEnabled[ , bool ]

Đặt xem có bật tính năng xoay người dùng hay không

• bool

  Giá trị trung thực cho phép người dùng xoay;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

40

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

41

Nhận hoặc đặt mức thu phóng của biểu đồ

• mức độ

  Mức thu phóng để đặt

• tùy chọn

  Các tùy chọn để phóng to

  • mức độ

    Mức thu phóng để đặt

  • Vị trí để phóng to

  • Vị trí được hiển thị để thu phóng

Thông tin chi tiết

Mức thu phóng phải là số dương. Các mức thu phóng không phải là số sẽ bị bỏ qua;

Khi phóng to một điểm qua

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

412, các tùy chọn được xác định như sau

Để phóng to về một vị trí được hiển thị [i. e. một vị trí trên màn hình]

Để phóng to về một vị trí mô hình

Bạn có thể thu phóng về một vị trí hoặc vị trí được hiển thị nhưng không thể thu phóng cả hai. Bạn chỉ nên chỉ định một trong số

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

413 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

414

ví dụ

Phóng to yếu tố 2

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

42

Phóng to hệ số thu phóng tối thiểu

Phóng to hệ số thu phóng tối đa

Phóng to về một nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

43

Nhận hoặc đặt có bật tính năng thu phóng hay không

Nhận xem tính năng thu phóng có được bật hay không

Đặt xem có bật tính năng thu phóng hay không

• bool

  Giá trị trung thực cho phép thu phóng;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

44

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

45

Nhận hoặc đặt xem thu phóng theo sự kiện của người dùng [e. g. con lăn chuột, pinch-to-zoom] được bật

Nhận xem tính năng thu phóng của người dùng có được bật hay không

C y. userZoomingEnabled[ , bool ]

Đặt xem có bật thu phóng người dùng hay không

• bool

  Giá trị trung thực cho phép người dùng phóng to;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

46

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

47

Nhận hoặc đặt mức thu phóng tối thiểu

Nhận mức thu phóng tối thiểu

Đặt mức thu phóng tối thiểu

• phóng

  Mức thu phóng tối thiểu mới để sử dụng

Nhận hoặc đặt mức thu phóng tối đa

Nhận mức thu phóng tối đa

Đặt mức thu phóng tối đa

• phóng

  Mức thu phóng tối đa mới để sử dụng

Đặt trạng thái khung nhìn [pan & zoom] trong một cuộc gọi

• tùy chọn

  Tùy chọn khung nhìn

  • phóng

    Mức thu phóng để đặt

  • Pan để thiết lập [một vị trí kết xuất]

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

48

Nhận hoặc đặt xem lựa chọn hộp có được bật hay không. Nếu được bật cùng với tính năng xoay, người dùng phải nhấn giữ một trong các phím shift, control, alt hoặc lệnh để bắt đầu chọn hộp

Nhận xem lựa chọn hộp có được bật hay không

C y. hộpSelectionEnabled[ , bool ]

Đặt xem lựa chọn hộp có được bật hay không

• bool

  Giá trị trung thực cho phép lựa chọn hộp;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

49

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

50

Nhận hoặc đặt loại lựa chọn. Loại lựa chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

238 là mặc định, chạm vào một phần tử sẽ chọn phần tử đó và bỏ chọn các phần tử trước đó.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

416

Lấy chuỗi loại lựa chọn

• loại hình

  Chuỗi loại lựa chọn;

Nhận chiều rộng trên màn hình của chế độ xem tính bằng pixel

Nhận chiều cao trên màn hình của chế độ xem tính bằng pixel

Nhận phạm vi của chế độ xem, hộp giới hạn trong tọa độ mô hình cho phép bạn biết vị trí mô hình nào có thể nhìn thấy trong chế độ xem

Thông tin chi tiết

Hàm này trả về một hộp giới hạn đối tượng đơn giản có định dạng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

419

Nhận hoặc đặt xem các nút có tự động bị khóa hay không [i. e. nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206, các nút bị khóa bất chấp trạng thái riêng lẻ của chúng]

Nhận xem tự động khóa có được bật hay không

Đặt có bật tự động khóa hay không

• bool

  Giá trị trung thực cho phép tự động khóa;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

51

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

52

Nhận hoặc đặt xem các nút có tự động được hủy thu thập hay không [i. e. nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206, các nút không thể lấy được bất chấp trạng thái riêng lẻ của chúng]

Nhận xem tính năng tự động đăng ký có được bật hay không

Đặt có bật tính năng tự động đăng tải hay không

• bool

  Giá trị trung thực cho phép tự động thu thập dữ liệu;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

53

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

54

Nhận hoặc đặt xem các nút có tự động không được chọn hay không [i. e. nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

206, các nút không thể chọn được mặc dù trạng thái riêng lẻ của chúng]

Nhận xem tính năng tự động bỏ chọn có được bật hay không

C y. tự động bỏ chọn[ , bool ]

Đặt có bật tính năng tự động bỏ chọn hay không

• bool

  Giá trị trung thực cho phép tự động bỏ chọn;

ví dụ

Cho phép

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

55

Vô hiệu hóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

56

Buộc trình kết xuất tính toán lại giới hạn khung nhìn

Thông tin chi tiết

Nếu mã của bạn thay đổi kích thước hoặc vị trí của biểu đồ [i. e. bằng cách thay đổi kiểu của phần tử DOM HTML chứa biểu đồ hoặc bằng cách thay đổi vị trí của phần tử DOM trong cây DOM], bạn sẽ muốn gọi _ _ _ _ _ _

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

423 để thay đổi kích thước biểu đồ và tự vẽ lại

Nếu việc nhấn vào biểu đồ bị lệch thay vì ở đúng vị trí, thì cần gọi tới ____

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

423. Khai thác cũng có thể trở thành phần bù nếu phần tử vùng chứa không trống;

hình ảnh tế bào. js không thể tự động theo dõi hộp giới hạn của chế độ xem, vì việc truy vấn DOM cho các kích thước đó có thể tốn kém. Mặc dù

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

423 được tự động gọi cho bạn trong sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

427 của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

426, nhưng không có sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

427 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

209 cho các phần tử DOM tùy ý

hoạt hình

Nhận xem cổng xem hiện đang được làm động hay không

• tùy chọn

  Một đối tượng chứa các chi tiết của hoạt ảnh

  • phóng

    Mức thu phóng [số] hoặc đối tượng cấu hình thu phóng mà biểu đồ sẽ được làm động

  • mức độ

    Mức thu phóng để sử dụng

  • Vị trí xảy ra thu phóng. Điều này sẽ tự động sửa đổi pan sao cho vị trí mô hình đã chỉ định vẫn ở cùng một vị trí trong phạm vi khung nhìn trong khi thu phóng

  • Vị trí được hiển thị về vị trí thu phóng xảy ra, thay thế cho việc sử dụng vị trí mô hình. Điều này sẽ tự động sửa đổi pan sao cho vị trí mô hình, tương ứng với vị trí được hiển thị khi bắt đầu hoạt ảnh, vẫn ở cùng một vị trí trong phạm vi khung nhìn trong khi thu phóng

  • Một vị trí xoay mà biểu đồ sẽ được làm động

  • Một vị trí xoay tương đối mà biểu đồ sẽ được làm động

  • Phù hợp

    Một đối tượng chứa các tùy chọn phù hợp mà từ đó biểu đồ sẽ được làm động

  • Các thành phần hoặc bộ chọn mà khung nhìn sẽ được trang bị

  • đệm

    Đệm để sử dụng với phụ kiện [mặc định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    409]

  • trung tâm

    Một đối tượng chứa các tùy chọn định tâm mà từ đó biểu đồ sẽ được làm động

  • Các thành phần hoặc bộ chọn mà chế độ xem sẽ được căn giữa

  • khoảng thời gian

    Thời lượng của hoạt ảnh tính bằng mili giây

  • xếp hàng

    Một giá trị boolean cho biết có nên xếp hàng hoạt ảnh hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]. Hoạt hình xếp hàng trên lõi chạy theo thứ tự cho đến khi hàng đợi trống

  • Một chuỗi kiểu nới lỏng định hình đường cong tiến trình hoạt ảnh

  • hoàn thành

    Một chức năng để gọi khi hoạt hình được thực hiện

  • bươc

    Một chức năng để gọi mỗi khi các bước hoạt hình

ví dụ

Xoay và thu phóng thủ công

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

57

Phù hợp với các yếu tố

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

58

• tùy chọn

  Một đối tượng chứa các chi tiết của hoạt ảnh

  • phóng

    Mức thu phóng [số] hoặc đối tượng cấu hình thu phóng mà biểu đồ sẽ được làm động

  • mức độ

    Mức thu phóng để sử dụng

  • Vị trí xảy ra thu phóng. Điều này sẽ tự động sửa đổi pan sao cho vị trí mô hình đã chỉ định vẫn ở cùng một vị trí trong phạm vi khung nhìn trong khi thu phóng

  • Vị trí được hiển thị về vị trí thu phóng xảy ra, thay thế cho việc sử dụng vị trí mô hình. Điều này sẽ tự động sửa đổi pan sao cho vị trí mô hình, tương ứng với vị trí được hiển thị khi bắt đầu hoạt ảnh, vẫn ở cùng một vị trí trong phạm vi khung nhìn trong khi thu phóng

  • Một vị trí xoay mà biểu đồ sẽ được làm động

  • Một vị trí xoay tương đối mà biểu đồ sẽ được làm động

  • Phù hợp

    Một đối tượng chứa các tùy chọn phù hợp mà từ đó biểu đồ sẽ được làm động

  • Các thành phần hoặc bộ chọn mà khung nhìn sẽ được trang bị

  • đệm

    Đệm để sử dụng với phụ kiện [mặc định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    409]

  • trung tâm

    Một đối tượng chứa các tùy chọn định tâm mà từ đó biểu đồ sẽ được làm động

  • Các thành phần hoặc bộ chọn mà chế độ xem sẽ được căn giữa

  • khoảng thời gian

    Thời lượng của hoạt ảnh tính bằng mili giây

  • Một chuỗi kiểu nới lỏng định hình đường cong tiến trình hoạt ảnh

  • hoàn thành

    Một chức năng để gọi khi hoạt hình được thực hiện

  • bươc

    Một chức năng để gọi mỗi khi các bước hoạt hình

Thêm độ trễ giữa các hình động được xếp hàng đợi cho chế độ xem

C y. độ trễ[ , thời lượng, hoàn thành ]

• khoảng thời gian

  Độ trễ sẽ kéo dài bao lâu tính bằng mili giây

• hoàn thành

  Một chức năng để gọi khi độ trễ hoàn thành

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

59

C y. delayAnimation[ , thời lượng ]

• khoảng thời gian

  Độ trễ sẽ kéo dài bao lâu tính bằng mili giây

Dừng tất cả hoạt hình khung nhìn hiện đang chạy

C y. dừng[ , clearQueue, jumpToEnd ]

• ClearQueue

  Một giá trị boolean [mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  435], cho biết có nên làm trống hàng đợi hoạt ảnh hay không

• nhảy đến cuối

  Một giá trị boolean [mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  435], cho biết liệu hoạt ảnh hiện đang chạy có nên chuyển đến hết thay vì chỉ dừng giữa chừng hay không

Xóa tất cả các hình động được xếp hàng đợi cho chế độ xem

Cách trình bày

Nhận bố cục mới, có thể được sử dụng để định vị các nút trong biểu đồ theo thuật toán

• tùy chọn

  Các tùy chọn bố cục

Bạn phải chỉ định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

437 với tên của bố cục bạn muốn sử dụng

Hàm này tạo và trả về một. Bạn có thể muốn giữ một tham chiếu đến bố cục cho các trường hợp sử dụng nâng cao hơn, chẳng hạn như chạy nhiều bố cục cùng một lúc

Bố cục bao gồm tất cả các phần tử trong biểu đồ tại thời điểm ________ 4272 được gọi, vì ________ 4272 tương đương với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

440. Bạn có thể sử dụng để chạy bố cục trên tập hợp con của các phần tử trong biểu đồ

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

60

Phong cách

Nhận điểm vào để sửa đổi kiểu trực quan của biểu đồ sau khi khởi tạo

Lấy đối tượng phong cách hiện tại

Chỉ định biểu định kiểu mới để thay thế biểu định kiểu hiện có

• Đối tượng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  442, biểu định kiểu chuỗi hoặc biểu định kiểu JSON [các định dạng giống nhau được chấp nhận khi khởi tạo]

Thông tin chi tiết

Bạn có thể sử dụng chức năng này để có quyền truy cập vào kiểu trực quan [bản định kiểu] sau khi khởi tạo. Điều này hữu ích nếu bạn cần thay đổi toàn bộ biểu định kiểu khi chạy

Đặt kiểu mới theo tham chiếu

Đặt một kiểu hoàn toàn mới cho biểu đồ, chỉ định và thông qua các lệnh gọi hàm

Đặt biểu định kiểu hoàn toàn mới [không có biểu định kiểu mặc định làm cơ sở]

Thêm vào biểu định kiểu hiện có

Đặt kiểu từ JSON thuần túy

Đặt kiểu từ một chuỗi kiểu [có thể bạn sẽ lấy từ một tệp trên máy chủ của mình]

Lấy kiểu hiện tại dưới dạng JSON

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

61

Xuất khẩu

Xuất chế độ xem biểu đồ hiện tại dưới dạng hình ảnh PNG

• tùy chọn

  Các tùy chọn xuất

  • đầu ra

    Liệu đầu ra có phải là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    444 [mặc định],

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    445,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    446 hay

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    447 hay không [một lời hứa phân giải thành đốm màu được trả lại]

  • bg

    Màu nền của ảnh [mặc định trong suốt]

  • đầy

    Xuất chế độ xem khung nhìn hiện tại [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định] hay toàn bộ biểu đồ [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • tỉ lệ

    Giá trị này chỉ định một số dương chia tỷ lệ kích thước của hình ảnh kết quả

  • chiều rộng tối đa

    Tự động chỉ định tỷ lệ kết hợp với

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    450 sao cho hình ảnh thu được không rộng hơn

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    451

  • chiều cao tối đa

    Tự động chỉ định tỷ lệ kết hợp với

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    451 sao cho hình ảnh thu được không cao hơn

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    450

Thông tin chi tiết

Hàm này xuất biểu đồ hiện được hiển thị dưới dạng hình ảnh, vì vậy bạn không thể gọi hàm này trong trường hợp không có đầu. Theo mặc định, quá trình xuất sẽ tính đến mật độ pixel màn hình hiện tại để hình ảnh có cùng chất lượng với màn hình. Nếu các tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

451 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

450 được chỉ định, thì mật độ pixel màn hình sẽ bị bỏ qua để hình ảnh có thể vừa với các kích thước đã chỉ định

ví dụ

Thẻ hình ảnh ví dụ

Xuất chế độ xem biểu đồ hiện tại dưới dạng hình ảnh JPG

• tùy chọn

  Các tùy chọn xuất

  • đầu ra

    Liệu đầu ra có phải là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    444 [mặc định],

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    445,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    446 hay

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    447 hay không [một lời hứa phân giải thành đốm màu được trả lại]

  • bg

    Màu nền của hình ảnh [màu trắng theo mặc định]

  • đầy

    Xuất chế độ xem khung nhìn hiện tại [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định] hay toàn bộ biểu đồ [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • tỉ lệ

    Giá trị này chỉ định một số dương chia tỷ lệ kích thước của hình ảnh kết quả

  • chiều rộng tối đa

    Tự động chỉ định tỷ lệ kết hợp với

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    450 sao cho hình ảnh thu được không rộng hơn

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    451

  • chiều cao tối đa

    Tự động chỉ định tỷ lệ kết hợp với

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    451 sao cho hình ảnh thu được không cao hơn

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    450

  • phẩm chất

    Chỉ định chất lượng của hình ảnh từ ________ 4409 [chất lượng thấp, kích thước tệp thấp] đến ________ 4467 [chất lượng cao, kích thước tệp cao]. Nếu không được đặt, giá trị chất lượng mặc định của trình duyệt sẽ được sử dụng

Thông tin chi tiết

Hàm này xuất biểu đồ hiện được hiển thị dưới dạng hình ảnh, vì vậy bạn không thể gọi hàm này trong trường hợp không có đầu. Theo mặc định, quá trình xuất sẽ tính đến mật độ pixel màn hình hiện tại để hình ảnh có cùng chất lượng với màn hình. Nếu các tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

451 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

450 được chỉ định, thì mật độ pixel màn hình sẽ bị bỏ qua để hình ảnh có thể vừa với các kích thước đã chỉ định

ví dụ

Thẻ hình ảnh ví dụ

Nhập hoặc xuất biểu đồ ở cùng định dạng JSON được sử dụng khi khởi tạo

Xuất biểu đồ dưới dạng JSON

• phẳngEles

  Liệu JSON kết quả nên bao gồm các phần tử dưới dạng một mảng phẳng [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  206] hay dưới dạng hai mảng có khóa theo nhóm [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  435, mặc định]

Nhập biểu đồ dưới dạng JSON, chỉ cập nhật các trường được chỉ định

• Đối tượng với các trường tương ứng với các trạng thái cần thay đổi

Thông tin chi tiết

Hàm này trả về cùng một đối tượng được sử dụng cho. Bạn sẽ thấy chức năng này hữu ích nếu bạn muốn lưu toàn bộ trạng thái của biểu đồ, cho mục đích của riêng bạn hoặc để khôi phục trạng thái biểu đồ đó trong tương lai

Chức năng này cũng có thể được sử dụng để đặt trạng thái biểu đồ như trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

472, trong đó mỗi trường trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

473 sẽ được thay đổi trong biểu đồ. Đối với mỗi trường được xác định trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

473,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

62 được cập nhật để khớp với các sự kiện tương ứng được phát ra. Điều này cho phép thực hiện các thay đổi khai báo trên biểu đồ

Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

472, tất cả có thể thay đổi đều được hỗ trợ

Khi cài đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

477

• các yếu tố bao gồm được đột biến như quy định [i. e. như họ sẽ được bởi ],
• các yếu tố bao gồm không có trong biểu đồ được thêm vào và
• các phần tử không được bao gồm sẽ bị xóa khỏi biểu đồ

Lưu ý rằng việc cập nhật các thành phần Đồ thị bằng cách sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

479 yêu cầu tất cả các thành phần phải có thuộc tính ID. Các phần tử không có ID sẽ bị bỏ qua

Khi cài đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

480

• toàn bộ biểu định kiểu được thay thế và
• kiểu dáng được tính toán lại cho từng phần tử

Cập nhật biểu định kiểu rất tốn kém. Tương tự, việc cập nhật các phần tử hiện có cho các biểu đồ lớn có thể rất tốn kém — vì mỗi phần tử cần được xem xét và có khả năng là từng trường trên mỗi phần tử. Đối với các phần tử, một tùy chọn rẻ hơn nhiều là gọi có chọn lọc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

481 chỉ với các trường cần được cập nhật

ví dụ

_______462____463

Một bộ sưu tập chứa một tập hợp các nút và cạnh. Gọi hàm áp dụng hàm cho tất cả các phần tử trong bộ sưu tập. Ví dụ: khi đọc các giá trị từ một bộ sưu tập, giá trị của phần tử đầu tiên trong bộ sưu tập được trả về. Ví dụ

Bạn có thể đảm bảo rằng bạn đang đọc từ phần tử bạn muốn bằng cách sử dụng a để thu hẹp bộ sưu tập thành một phần tử [i. e.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

483] hoặc chức năng

Cũng lưu ý rằng các bộ sưu tập có thể lặp lại đối với các trình duyệt hiện đại hỗ trợ các giao thức lặp lại. Điều này cho phép sử dụng các tính năng như toán tử trải rộng, vòng lặp for-of và phá hủy

Thao tác đồ thị

Lấy phiên bản cốt lõi sở hữu phần tử

Xóa các phần tử khỏi biểu đồ và trả về tất cả các phần tử bị xóa bởi lệnh gọi này

Thông tin chi tiết

Hàm này loại bỏ các phần tử gọi khỏi biểu đồ. Các phần tử không bị xóa — chúng vẫn tồn tại trong bộ nhớ — nhưng chúng không còn trong biểu đồ

ví dụ

Xóa các phần tử đã chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

64

Nhận xem phần tử đã bị xóa khỏi biểu đồ chưa

Nhận xem phần tử có nằm trong biểu đồ hay không [i. e. không bị loại bỏ]

Đặt lại các phần tử đã xóa vào biểu đồ

Thông tin chi tiết

Hàm này đặt lại các phần tử trong biểu đồ đã bị xóa. Nó sẽ không làm gì nếu các phần tử đã có trong biểu đồ

Không thể khôi phục phần tử nếu ID của nó giống với phần tử đã có trong biểu đồ. Bạn nên chỉ định một ID thay thế cho thành phần bạn muốn thêm trong trường hợp đó

ví dụ

Nhận một bộ sưu tập mới chứa các bản sao [i. e. bản sao] của các phần tử trong bộ sưu tập cuộc gọi

Di chuyển các phần tử đối với cấu trúc liên kết đồ thị [i. e.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

78,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

79 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

76 mới]

Thay đổi nguồn, đích hoặc cả nguồn và đích

• địa điểm

  Nơi các cạnh được di chuyển. Bạn có thể chỉ định một nguồn mới, một mục tiêu mới hoặc cả hai

  • nguồn

    ID của nút nguồn mới

  • Mục tiêu

    ID của nút mục tiêu mới

• địa điểm

  Nơi các nút được di chuyển

  • cha mẹ

    ID của nút cha mới [sử dụng

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    405 nếu không có nút cha]

Thông tin chi tiết

Hàm này di chuyển các phần tử tại chỗ, do đó không có sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

489 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

490 nào được tạo. Sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

491 được phát ra trên các phần tử đã di chuyển

ví dụ

Di chuyển một cạnh

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

65

Sự kiện

Lắng nghe các sự kiện xảy ra trên các phần tử

eles. bật[ , sự kiện [, bộ chọn], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn đại biểu để chỉ định các phần tử con mà trình xử lý chạy

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

Thông tin chi tiết

Các sự kiện chỉ bị ràng buộc với các phần tử hiện có; . Ngoài ra, hãy sử dụng trình xử lý sự kiện cốt lõi [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

493] để đính kèm trình xử lý sự kiện

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66

Nhận một lời hứa được giải quyết lần đầu tiên khi bất kỳ phần tử nào phát ra bất kỳ sự kiện nào được chỉ định

eles. PromiseOn[ , sự kiện [, bộ chọn] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn để chỉ định các phần tử mà trình xử lý được phát ra

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

67

Thêm một trình nghe được gọi một lần cho mỗi sự kiện trên mỗi phần tử

eles. một[ , sự kiện [, bộ chọn], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn đại biểu để chỉ định các phần tử con mà trình xử lý chạy

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

Thông tin chi tiết

Đối với mỗi sự kiện được chỉ định cho chức năng này, chức năng xử lý được kích hoạt một lần cho mỗi phần tử. Điều này hữu ích cho các sự kiện một lần xảy ra trên từng phần tử trong bộ sưu tập cuộc gọi một lần

Hàm này phức tạp hơn một chút đối với các nút ghép trong đó bộ chọn đại biểu đã được chỉ định. Lưu ý rằng trình xử lý được gọi một lần cho mỗi phần tử trong tập hợp cuộc gọi và trình xử lý được kích hoạt bằng cách khớp các phần tử con cháu

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

68

Thêm một trình nghe được gọi một lần cho mỗi sự kiện trên mỗi bộ sưu tập

eles. một lần[ , sự kiện [, bộ chọn], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn đại biểu để chỉ định các phần tử con mà trình xử lý chạy

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

Thông tin chi tiết

Đối với mỗi sự kiện được chỉ định cho chức năng này, chức năng xử lý được kích hoạt một lần. Điều này hữu ích cho các sự kiện một lần chỉ xảy ra trên một phần tử trong bộ sưu tập cuộc gọi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

69

Xóa một hoặc nhiều người nghe trên các phần tử

eles. removeListener[ , sự kiện [, bộ chọn] [, trình xử lý] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• [không bắt buộc]

  Bộ chọn đại biểu tương tự được sử dụng để lắng nghe các sự kiện

• trình xử lý [tùy chọn]

  Một tham chiếu đến chức năng xử lý để loại bỏ

eles. removeAllListeners[]

Xóa tất cả các trình xử lý sự kiện trên các phần tử

Phát ra các sự kiện trên các phần tử

eles. phát ra[ , sự kiện [, extraParams] ]

• Danh sách các tên sự kiện sẽ phát ra [một chuỗi được phân tách bằng dấu cách hoặc một mảng]

• extraParams [tùy chọn]

  Một mảng các tham số bổ sung để chuyển đến trình xử lý

Dữ liệu

Đọc và ghi dữ liệu do nhà phát triển xác định được liên kết với các phần tử

Lấy toàn bộ đối tượng dữ liệu

Nhận một trường dữ liệu cụ thể cho phần tử

• Tên

  Tên của lĩnh vực để có được

Đặt trường dữ liệu cụ thể cho phần tử

• Tên

  Tên trường cần đặt

• giá trị

  Giá trị để đặt cho trường

Cập nhật nhiều trường dữ liệu cùng lúc thông qua một đối tượng

• đối tượng

  Đối tượng chứa các cặp tên-giá trị để cập nhật trường dữ liệu

Thông tin chi tiết

Chỉ dữ liệu có thể tuần tự hóa JSON mới có thể được đưa vào

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

81. Đối với dữ liệu tạm thời hoặc dữ liệu không thể tuần tự hóa, hãy sử dụng

Các trường sau đây thường không thay đổi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  496. Trường

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  496 được sử dụng để xác định duy nhất một phần tử trong biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  78 &

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  79. Các trường này xác định mối quan hệ của một cạnh với các nút và không thể thay đổi mối quan hệ này sau khi tạo

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  76. Trường

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  76 xác định nút cha [ghép]

Để sửa đổi các trường làm thay đổi cấu trúc liên kết đồ thị, bạn phải sử dụng

ví dụ

Xóa dữ liệu do nhà phát triển xác định được liên kết với các phần tử

Xóa tất cả các trường dữ liệu có thể thay đổi cho các phần tử

Xóa các trường dữ liệu có thể thay đổi được chỉ định cho các phần tử

• tên

  Danh sách các trường được phân tách bằng dấu cách để xóa

Thông tin chi tiết

Sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

503 đặt các trường được chỉ định thành

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

404. Điều này cho phép bạn sử dụng giá trị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

405 có ý nghĩa trong dữ liệu phần tử của mình

Các trường dữ liệu sau thường không thay đổi nên không thể xóa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  496. Trường

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  496 được sử dụng để xác định duy nhất một phần tử trong biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  78 &

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  79. Các trường này xác định mối quan hệ của một cạnh với các nút và không thể thay đổi mối quan hệ này sau khi tạo

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  76. Trường

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  76 xác định nút cha [ghép]

Để sửa đổi cấu trúc liên kết của biểu đồ mà không cần thêm hoặc bớt các phần tử, bạn phải sử dụng. Mặc dù vậy, chỉ có thể xóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

76 bởi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

502. Một cạnh luôn yêu cầu nguồn và đích hợp lệ

hàm số. Chức năng này được thiết kế để sử dụng trong các tiện ích mở rộng

Đặt hoặc nhận dữ liệu bàn di chuột, nơi có thể lưu trữ dữ liệu tạm thời hoặc không phải JSON. Dữ liệu bàn di chuột cấp ứng dụng nên sử dụng không gian tên có tiền tố gạch dưới, chẳng hạn như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

400

Nhận toàn bộ đối tượng bàn di chuột cho phần tử

Lấy bàn di chuột tại một không gian tên cụ thể

• không gian tên

  Một chuỗi không gian tên

đàn bầu. cào[ , không gian tên, giá trị ]

Đặt bàn di chuột tại một không gian tên cụ thể

• không gian tên

  Một chuỗi không gian tên

• giá trị

  Giá trị để đặt tại không gian tên được chỉ định

Thông tin chi tiết

Chức năng này hữu ích để lưu trữ dữ liệu tạm thời, có thể không phải JSON. Tiện ích mở rộng — như bố cục, trình kết xuất, v.v. — sử dụng khoảng cách tên

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

401 trên tên đã đăng ký của chúng. Ví dụ: tiện ích mở rộng có tên

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

517 sẽ sử dụng không gian tên

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

518

Nếu bạn muốn sử dụng chức năng này cho dữ liệu cấp ứng dụng của riêng mình, bạn có thể thêm tiền tố vào các không gian tên mà bạn sử dụng bằng dấu gạch dưới để tránh xung đột với tiện ích mở rộng. Ví dụ: sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

519 trong ứng dụng của bạn sẽ tránh xung đột với tiện ích mở rộng có tên

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

517

Hàm này hữu ích để liên kết dữ liệu không phải JSON với một phần tử. Trong khi dữ liệu được lưu trữ qua

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

81 được bao gồm bởi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

522, dữ liệu được lưu trữ bởi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

401 thì không. Điều này giúp dễ dàng lưu trữ tạm thời dữ liệu không thể đánh số tự động

ví dụ

hàm số. Chức năng này được thiết kế để sử dụng trong các tiện ích mở rộng

Xóa dữ liệu trên bàn di chuột. Bạn chỉ nên xóa dữ liệu bàn di chuột tại các không gian tên của riêng mình

đàn bầu. removeScratch[ , không gian tên ]

Xóa dữ liệu bàn di chuột tại một không gian tên cụ thể

• không gian tên

  Một chuỗi không gian tên

Một phím tắt để lấy ID của một phần tử

Nhận hoặc thay đổi biểu diễn đối tượng JavaScript đơn giản của phần tử

Thay đổi trạng thái của phần tử theo quy định

• Đối với mỗi trường trong đối tượng, trạng thái của phần tử được thay đổi theo chỉ định

Thông tin chi tiết

Hàm này trả về phần tử, cùng định dạng được sử dụng khi khởi tạo, trong, v.v.

Chức năng này cũng có thể được sử dụng để thiết lập trạng thái của phần tử bằng cách sử dụng thuộc tính của phần tử. Mỗi trường được chỉ định trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

478 khác với trạng thái hiện tại của phần tử, phần tử được thay đổi tương ứng và các sự kiện thích hợp được phát ra. Điều này có thể được sử dụng để khai báo sửa đổi các yếu tố

Lưu ý rằng sẽ nhanh hơn nhiều nếu chỉ cần chỉ định các đối tượng bản vá khác cho

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

522, e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

527 chỉ cập nhật

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

517 trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

77. Điều này tránh được chi phí chênh lệch trên các trường không thay đổi, điều này rất hữu ích khi thực hiện nhiều cuộc gọi tới

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

522 cho các biểu đồ lớn hơn

ví dụ

In JSON cho một phần tử

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

20

Tạo một phần tử được chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

21

Nhận một mảng biểu diễn đối tượng JavaScript đơn giản của tất cả các phần tử trong bộ sưu tập

Thông tin chi tiết

Hàm này trả về tất cả các phần tử trong bộ sưu tập, cùng định dạng được sử dụng khi khởi tạo, trong, v.v.

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

22

Lấy chuỗi nhóm xác định loại phần tử

Thông tin chi tiết

Các chuỗi nhóm là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

532 cho các nút và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

533 cho các cạnh. Nói chung, bạn nên sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

534 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

535 thay vì

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

536

Nhận xem phần tử có phải là một nút hay không

Nhận xem phần tử có phải là cạnh không

Nhận xem cạnh có phải là một vòng lặp hay không [i. e. cùng một nguồn và đích]

Nhận xem cạnh có đơn giản không [i. e. nguồn và đích khác nhau]

nút. độ[ , includeLoops ]

Nhận mức độ của một nút

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

nút. độ[ , includeLoops ]

Lấy độ của một nút

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

nút. outgrade[ , includeLoops ]

Nhận outgrade của một nút

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. totalDegree[ , includeLoops ]

Nhận tổng mức độ của một tập hợp các nút

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. minDegree[ , includeLoops ]

Nhận mức độ tối thiểu của các nút trong bộ sưu tập

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. maxDegree[ , includeLoops ]

Nhận mức độ tối đa của các nút trong bộ sưu tập

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. minIn Degree[ , includeLoops ]

Nhận mức độ tối thiểu của các nút trong bộ sưu tập

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. maxIn Degree[ , includeLoops ]

Nhận mức độ tối đa của các nút trong bộ sưu tập

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. minOut Degree[ , includeLoops ]

Nhận độ lệch tối thiểu của các nút trong bộ sưu tập

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

điểm giao. maxOutđộ[ , includeLoops ]

Nhận độ vượt trội tối đa của các nút trong bộ sưu tập

• bao gồm các vòng lặp

  Một boolean, cho biết liệu các vòng lặp có được đưa vào phép tính độ hay không

Thông tin chi tiết

Bằng cấp. Đối với một nút, độ là số lượng kết nối cạnh mà nó có. Mỗi khi một nút được tham chiếu là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

78 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

79 của một cạnh trong biểu đồ, thì lần đó được tính là một kết nối cạnh

bằng cấp. Đối với một nút, độ trong là số lượng kết nối cạnh đến mà nó có. Mỗi lần một nút được gọi là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

79 của một cạnh trong biểu đồ, điều đó được tính là một kết nối cạnh đến

bằng cấp. Đối với một nút, độ vượt trội là số lượng kết nối cạnh ra mà nó có. Mỗi lần một nút được gọi là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

78 của một cạnh trong biểu đồ, điều đó được tính là một kết nối cạnh đi

tổng độ. Đối với một tập hợp các nút, tổng độ là tổng số cạnh kết nối với các nút trong tập hợp

Vị trí & kích thước

Lấy toàn bộ đối tượng vị trí

nút. vị trí[ , thứ nguyên ]

Nhận giá trị của một thứ nguyên vị trí được chỉ định

• kích thước

  Kích thước vị trí để có được

nút. vị trí[ , thứ nguyên, giá trị ]

Đặt giá trị của thứ nguyên vị trí đã chỉ định

• kích thước

  Kích thước vị trí để thiết lập

• giá trị

  Giá trị để đặt thành thứ nguyên

Đặt vị trí bằng các cặp tên-giá trị trong đối tượng đã chỉ định

• Một đối tượng chỉ định các cặp tên-giá trị đại diện cho các kích thước cần đặt

Thông tin chi tiết

A có hai trường,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

541 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

542, có thể nhận các giá trị số

ví dụ

điểm giao. shift[ , thứ nguyên, giá trị ]

Dịch chuyển các nút theo một trong số

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

543 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

544

• kích thước

  Kích thước vị trí để thay đổi

• giá trị

  Giá trị để thay đổi kích thước

Dịch chuyển các nút bằng một vectơ vị trí

• Một đối tượng chỉ định các cặp tên-giá trị đại diện cho các kích thước cần thay đổi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

23

điểm giao. vị trí[ , chức năng[ele, i] ]

Đặt vị trí thông qua một chức năng

• chức năng [ele, i]

  Hàm gọi lại trả về vị trí được đặt cho từng phần tử

  • Phần tử được lặp lại mà hàm sẽ trả về một vị trí để đặt

  • i

    Chỉ số của phần tử khi lặp qua các phần tử trong bộ sưu tập

Đặt vị trí cho tất cả các nút dựa trên một đối tượng vị trí duy nhất

• Một đối tượng chỉ định các cặp tên-giá trị đại diện cho các kích thước cần đặt

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

24

Nhận toàn bộ đối tượng vị trí được hiển thị

nút. renderedPosition[ , thứ nguyên ]

Nhận giá trị của thứ nguyên vị trí được hiển thị đã chỉ định

• kích thước

  Kích thước vị trí để có được

nút. renderedPosition[ , thứ nguyên, giá trị ]

Đặt giá trị của thứ nguyên vị trí được hiển thị đã chỉ định

• kích thước

  Kích thước vị trí để thiết lập

• giá trị

  Giá trị để đặt thành thứ nguyên

nút. renderedPosition[ , pos ]

Đặt vị trí được hiển thị bằng các cặp tên-giá trị trong đối tượng đã chỉ định

• Một đối tượng chỉ định các cặp tên-giá trị đại diện cho các kích thước cần đặt

Nhận hoặc đặt nút, liên quan đến cha mẹ ghép của nó

Lấy toàn bộ đối tượng vị trí tương đối

nút. vị trí tương đối[ , thứ nguyên ]

Nhận giá trị của một thứ nguyên vị trí tương đối được chỉ định

• kích thước

  Kích thước vị trí để có được

nút. vị trí tương đối[ , thứ nguyên, giá trị ]

Đặt giá trị của thứ nguyên vị trí tương đối được chỉ định

• kích thước

  Kích thước vị trí để thiết lập

• giá trị

  Giá trị để đặt thành thứ nguyên

nút. vị trí tương đối[ , vị trí ]

Đặt vị trí tương đối bằng cách sử dụng các cặp tên-giá trị trong đối tượng đã chỉ định

• Một đối tượng chỉ định các cặp tên-giá trị đại diện cho các kích thước cần đặt

Lấy chiều rộng của phần tử. Chiều rộng thô của phần tử được trả về, không phụ thuộc vào việc phần tử có hiển thị hay không

Lấy chiều rộng bên ngoài của phần tử trong [bao gồm chiều rộng, phần đệm và đường viền]

Nhận chiều rộng bên ngoài của phần tử trong [bao gồm chiều rộng, phần đệm và đường viền] trong kích thước được hiển thị

Lấy chiều cao của phần tử. Chiều cao thô của phần tử được trả về, không phụ thuộc vào việc phần tử có hiển thị hay không

Lấy chiều cao bên ngoài của phần tử trong [bao gồm chiều cao, phần đệm và đường viền]

đàn bầu. kết xuấtOuterHeight[]

Nhận chiều cao bên ngoài của phần tử trong [bao gồm chiều cao, phần đệm và đường viền] trong kích thước được hiển thị

eles. ranh giớiBox[ , tùy chọn ]

• tùy chọn

  Một đối tượng chứa các tùy chọn cho chức năng

  • bao gồm các nút

    Một giá trị boolean cho biết có bao gồm các nút trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm các cạnh

    Một giá trị boolean cho biết có bao gồm các cạnh trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm Nhãn

    Một giá trị boolean cho biết liệu có bao gồm toàn bộ nhãn trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]. Tùy chọn này sẽ ghi đè tất cả các tùy chọn nhãn khác nếu

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435

  • bao gồm các nhãn chính

    Một giá trị boolean cho biết có bao gồm các

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    549 chính [nút hoặc cạnh] trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm các nhãn nguồn

    Một giá trị boolean cho biết có bao gồm [cạnh]

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    551 trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồmNhãn mục tiêu

    Một boolean cho biết có bao gồm [cạnh]

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    553 trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm lớp phủ

    Một boolean cho biết liệu có bao gồm các lớp phủ [chẳng hạn như lớp xuất hiện khi nhấp vào một nút] trong hộp giới hạn [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm lớp lót

    Một giá trị boolean cho biết có nên bao gồm các lớp lót [có thể định cấu hình theo kiểu nút hoặc cạnh] trong hộp giới hạn [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

Thông tin chi tiết

Hàm này trả về một đối tượng đơn giản với các trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

557,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

558,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

559,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

560,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

561 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

562 được xác định

Một phần tử không chiếm không gian [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563] có hộp giới hạn bằng 0

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

561 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

562. Các giá trị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

557,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

558,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

559 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

560 sẽ không có ý nghĩa gì đối với các phần tử vùng 0 đó. Để có được vị trí của nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563, thay vào đó hãy sử dụng

Lưu ý rằng tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

572 nhất thiết phải bao gồm các kích thước của phần thân của phần tử. Vì vậy, sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

573 với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

574 chẳng hạn, không có nghĩa. Trường hợp tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

572 chỉ hữu ích trong việc lấy kích thước không lớp phủ của một phần tử, e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

576. Điều tương tự cũng áp dụng cho tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

577

eles. kết xuấtBoundingBox[]

Lấy hộp giới hạn của các phần tử

eles. renderedBoundingBox[ , tùy chọn ]

Lấy hộp giới hạn của các phần tử trong tọa độ được hiển thị

• tùy chọn

  Một đối tượng chứa các tùy chọn cho chức năng

  • bao gồm các nút

    Một giá trị boolean cho biết có bao gồm các nút trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm các cạnh

    Một giá trị boolean cho biết có bao gồm các cạnh trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm Nhãn

    Một giá trị boolean cho biết liệu có bao gồm toàn bộ nhãn trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]. Tùy chọn này sẽ ghi đè tất cả các tùy chọn nhãn khác nếu

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435

  • bao gồm các nhãn chính

    Một giá trị boolean cho biết có bao gồm các

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    549 chính [nút hoặc cạnh] trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm các nhãn nguồn

    Một giá trị boolean cho biết có bao gồm [cạnh]

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    551 trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồmNhãn mục tiêu

    Một boolean cho biết có bao gồm [cạnh]

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    553 trong hộp giới hạn hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm lớp phủ

    Một boolean cho biết liệu có bao gồm các lớp phủ [chẳng hạn như lớp xuất hiện khi nhấp vào một nút] trong hộp giới hạn [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • bao gồm lớp lót

    Một giá trị boolean cho biết có nên bao gồm các lớp lót [có thể định cấu hình theo kiểu nút hoặc cạnh] trong hộp giới hạn [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

Thông tin chi tiết

Hàm này trả về một đối tượng đơn giản với các trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

557,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

558,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

559,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

560,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

561 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

562 được xác định

Một phần tử không chiếm không gian [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563] có hộp giới hạn bằng 0

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

561 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

562. Các giá trị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

557,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

558,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

559 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

560 sẽ không có ý nghĩa gì đối với các phần tử vùng 0 đó. Để có được vị trí của nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563, thay vào đó hãy sử dụng

Lưu ý rằng tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

572 nhất thiết phải bao gồm các kích thước của phần thân của phần tử. Vì vậy, sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

573 với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

574 chẳng hạn, không có nghĩa. Trường hợp tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

572 chỉ hữu ích trong việc lấy kích thước không lớp phủ của một phần tử, e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

576. Điều tương tự cũng áp dụng cho tùy chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

577

Nhận xem một nút hiện có bị lấy hay không, nghĩa là người dùng đã nắm giữ nút đó

Nhận xem người dùng có thể lấy một nút hay không

Cho phép người dùng lấy các nút

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

25

Không cho phép người dùng lấy các nút

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

26

Nhận xem một nút có bị khóa hay không, nghĩa là không thể thay đổi vị trí của nó

Khóa các nút sao cho không thể thay đổi vị trí của chúng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

27

Mở khóa các nút sao cho có thể thay đổi vị trí của chúng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

28

Nhận xem phần tử có đang hoạt động hay không [e. g. khi người dùng chạm, lấy, v.v.]

Nhận liệu phần tử có cho phép di chuyển qua lại hay không

Sự mô tả

Một phần tử pannable cho phép lướt qua. Người dùng có thể xoay biểu đồ khi kéo vào phần tử. Do đó, một yếu tố có thể pannable nhất thiết phải là không thể lấy được

Theo mặc định, một cạnh có thể di chuyển được và một nút không thể di chuyển được

Cho phép xoay chuyển qua trên các phần tử

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

29

Vô hiệu hóa chuyển qua panning trên các yếu tố

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

10

Điểm cạnh

bờ rìa. controlPoints[] và cộng sự

bờ rìa. renderedControlPoints[]

Thông tin chi tiết

Mỗi cạnh bezier bao gồm một hoặc nhiều đường cong bezier bậc hai

A được xác định bởi ba điểm. Những điểm đó bao gồm điểm đầu [P0], điểm điều khiển trung tâm [P1] và điểm cuối [P2]. Theo truyền thống, cả ba điểm đều được gọi là “điểm kiểm soát”, nhưng chỉ điểm kiểm soát trung tâm [P1] được gọi là “điểm kiểm soát” trong tài liệu này để đảm bảo tính ngắn gọn và rõ ràng. Hàm này trả về điểm điều khiển trung tâm, vì các điểm khác có sẵn bằng các hàm như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

611

Số điểm trả về cho mỗi kiểu đường cong như sau

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  612 [cạnh đơn]. 1 điểm cho một bezier bậc hai

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  612 [vòng lặp]. 2 điểm cho hai beziers bậc hai

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  614. n điểm cho n beziers bậc hai, vì số lượng điểm kiểm soát được xác định bởi

ghi chú

• Mặc dù các điểm kiểm soát có thể được chỉ định tương đối trong CSS, hàm này trả về giá trị tuyệt đối của các điểm kiểm soát. Các điểm được chỉ định theo thứ tự hướng từ nguồn đến đích
• Chức năng này hoạt động đối với các bezier được đóng gói, nhưng nó không áp dụng cho cạnh đường thẳng ở giữa trong gói
• Đối với một cạnh bezier không được nhóm, điểm nối hai đường cong bezier liên tiếp trong chuỗi được cho bởi điểm giữa [trung bình] của hai điểm kiểm soát. Điểm nối đó chỉ định P2 cho bezier đầu tiên và nó chỉ định P0 cho bezier thứ hai

bờ rìa. SegmentPoints[] và cộng sự

bờ rìa. kết xuấtSegmentPoints[]

Thông tin chi tiết

Mặc dù các điểm phân đoạn có thể được chỉ định tương đối trong biểu định kiểu, hàm này trả về giá trị tuyệt đối của các điểm phân đoạn. Các điểm được chỉ định theo thứ tự hướng từ nguồn đến đích

bờ rìa. sourceEndpoint[] và cộng sự

Lấy vị trí của cạnh kết thúc, về phía nút nguồn

bờ rìa. renderedSourceEndpoint[]

bờ rìa. targetEndpoint[] và cộng sự

Nhận vị trí nơi cạnh kết thúc, hướng tới nút đích

bờ rìa. kết xuấtTargetEndpoint[]

Lấy vị trí trung điểm của cạnh

Thông tin chi tiết

Theo mặc định, điểm giữa là nơi nhãn của cạnh được căn giữa. Nó cũng là vị trí mà các mũi tên ở giữa chỉ

Đối với các cạnh, điểm giữa là điểm cực trị ở giữa nếu số điểm kiểm soát là số lẻ. Đối với số lượng điểm kiểm soát chẵn, điểm giữa là nơi hai điểm kiểm soát ở giữa gặp nhau. Đây là điểm uốn giữa cho các cạnh đối xứng song phương hoặc đối xứng xiên, ví dụ

Đối với các cạnh, trung điểm là điểm của đoạn giữa nếu số điểm của đoạn là số lẻ. Đối với số điểm chẵn của đoạn thẳng, trung điểm tổng thể là trung điểm của đoạn thẳng ở giữa [i. e. trung bình của hai điểm đoạn giữa]

Cách trình bày

Nhận bố cục mới, có thể được sử dụng để định vị các nút trong bộ sưu tập theo thuật toán

• tùy chọn

  Các tùy chọn bố cục

Chức năng này hữu ích để chạy một bố cục trên một tập hợp con của các thành phần trong biểu đồ, có lẽ song song với các bố cục khác

Bạn phải chỉ định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

437 với tên của bố cục bạn muốn sử dụng

Hàm này tạo và trả về một. Bạn có thể muốn giữ một tham chiếu đến bố cục cho các trường hợp sử dụng nâng cao hơn, chẳng hạn như chạy nhiều bố cục cùng một lúc

ví dụ

Chỉ định vị trí ngẫu nhiên cho tất cả các nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

11

Chỉ áp dụng bố cục hình tròn cho các phần tử được hiển thị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

12

hàm số. Chức năng này được thiết kế để sử dụng trong các tiện ích mở rộng

Định vị các nút cho bố cục rời rạc/đồng bộ

điểm giao. layoutPositions[ , bố cục, tùy chọn, chức năng[ele, i] ]

• cách trình bày

  bố cục

• tùy chọn

  Đối tượng tùy chọn bố cục

• chức năng [ele, i]

  Hàm trả về vị trí mới cho nút đã chỉ định

  • Nút được lặp lại mà hàm sẽ trả về một vị trí để đặt

  • i

    Chỉ mục của nút hiện tại trong khi lặp qua các nút trong bố cục

Chức năng này được gọi bởi các bố cục rời rạc [đồng bộ] để cập nhật biểu đồ với các vị trí nút mới

Bố cục rời rạc chỉ chịu trách nhiệm tính toán các vị trí nút mới. Đặt các vị trí này và thực hiện hoạt ảnh, sửa đổi chế độ xem, thay đổi mức thu phóng, v.v. được xử lý bởi _______ 4620 — được gọi bởi mỗi bố cục ở cuối phương thức ________ 4621 của nó

Đối tượng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

622 được chuyển đến

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

620 khi được gọi bởi tiện ích mở rộng bố cục và bao gồm nhiều thuộc tính chung được chia sẻ giữa các bố cục

Lưu ý rằng nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

224 là true, nó sẽ ghi đè bất kỳ giá trị nào được cung cấp trong

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

227 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

223

hàm số. Chức năng này được thiết kế để sử dụng trong các tiện ích mở rộng

Lấy chiều rộng và chiều cao của nút. Chức năng này được thiết kế để sử dụng trong định vị bố cục để phát hiện chồng chéo

nút. Kích thước bố cục[ , tùy chọn ]

• tùy chọn

  Đối tượng tùy chọn bố cục

Hàm này được sử dụng để lấy chiều rộng và chiều cao của hộp giới hạn của một nút. Cách tính chiều rộng và chiều cao bị ảnh hưởng bởi đối tượng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

622

Hàm này trả về một đối tượng chứa chiều rộng và chiều cao của hộp giới hạn được tính theo các khóa

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

561 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

562 tương ứng. Nó có thể được sử dụng để thay thế trực tiếp cho hàm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

630 giả sử chỉ cần các giá trị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

561 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

562

tuyển chọn

Nhận xem phần tử có được chọn hay không

Làm cho các yếu tố được chọn. Các yếu tố bên ngoài bộ sưu tập không bị ảnh hưởng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

13

Làm cho các yếu tố không được chọn. Các yếu tố bên ngoài bộ sưu tập không bị ảnh hưởng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

14

Nhận xem trạng thái lựa chọn của phần tử có thể thay đổi hay không

Làm cho trạng thái lựa chọn của các phần tử có thể thay đổi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

15

Làm cho trạng thái lựa chọn của các phần tử không thay đổi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

16

Phong cách

Thêm các lớp vào các phần tử. Các lớp phải được chỉ định theo thứ tự để có ảnh hưởng đến kiểu kết xuất của các phần tử

• các lớp học

  Một mảng [hoặc một chuỗi được phân tách bằng dấu cách] của các tên lớp để thêm vào các phần tử

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

17

Xóa các lớp khỏi các phần tử. Các lớp phải được chỉ định theo thứ tự để có ảnh hưởng đến kiểu kết xuất của các phần tử

eles. removeClass[ , lớp ]

• các lớp học

  Một mảng [hoặc một chuỗi được phân tách bằng dấu cách] của các tên lớp cần xóa khỏi các phần tử

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

18

Chuyển đổi xem các phần tử có các lớp được chỉ định hay không. Các lớp phải được chỉ định theo thứ tự để có ảnh hưởng đến kiểu kết xuất của các phần tử

eles. chuyển đổiClass[ , các lớp [, chuyển đổi] ]

• các lớp học

  Một mảng [hoặc một chuỗi được phân tách bằng dấu cách] của các tên lớp để bật các phần tử

• chuyển đổi [tùy chọn]

  Thay vì tự động chuyển đổi, hãy thêm các lớp trên giá trị trung thực hoặc loại bỏ chúng trên giá trị sai

ví dụ

chuyển đổi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

19

Bật lên

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

70

tắt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

71

Nhận hoặc thay thế danh sách các lớp hiện tại trên các phần tử bằng danh sách đã chỉ định

Lấy danh sách các lớp dưới dạng một mảng cho phần tử

Thay thế danh sách các lớp cho tất cả các phần tử trong bộ sưu tập

• các lớp học

  Một mảng [hoặc một chuỗi được phân tách bằng dấu cách] tên lớp thay thế danh sách lớp hiện tại

ví dụ

Xóa tất cả các lớp

Thay thế các lớp

Thêm các lớp vào các phần tử, sau đó xóa các lớp sau một khoảng thời gian đã chỉ định

eles. flashClass[ , lớp [, thời lượng] ]

• các lớp học

  Một mảng [hoặc một chuỗi được phân tách bằng dấu cách] tên lớp để flash trên các phần tử

• thời lượng [tùy chọn]

  Thời lượng tính bằng mili giây mà các lớp sẽ được thêm vào các phần tử. Sau thời lượng, các lớp bị xóa

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

72

Nhận xem một phần tử có một lớp cụ thể hay không

• tên lớp

  Tên của lớp để kiểm tra cho

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

73

Nhận hoặc ghi đè kiểu của phần tử

Nhận một đối tượng cặp tên-giá trị chứa các thuộc tính kiểu trực quan và các giá trị của chúng cho phần tử

Nhận một giá trị thuộc tính phong cách cụ thể

• Tên

  Tên của thuộc tính kiểu trực quan cần lấy

Đặt giá trị thuộc tính kiểu cụ thể

• Tên

  Tên của thuộc tính kiểu trực quan cần đặt

• giá trị

  Giá trị của thuộc tính kiểu trực quan cần đặt

Đặt một số giá trị thuộc tính kiểu cụ thể

• đối tượng

  Một đối tượng của các cặp giá trị tên thuộc tính kiểu cần đặt

Xóa tất cả ghi đè kiểu

Xóa ghi đè kiểu cụ thể

• tên

  Danh sách tên thuộc tính được phân tách bằng dấu cách để xóa phần ghi đè

Thông tin chi tiết

• Có rất ít trường hợp sử dụng hợp lệ để cài đặt với ________ 4274
• Nó ghi đè kiểu của một phần tử, bất chấp trạng thái và các lớp mà nó có
• Nói chung, tốt hơn hết là chỉ định biểu định kiểu tốt hơn khi khởi tạo phản ánh trạng thái ứng dụng của bạn thay vì sửa đổi kiểu theo chương trình
• Bạn không thể tuần tự hóa và giải tuần tự hóa kiểu ghi đè qua ________ 4522

Chỉ được hỗ trợ

Nếu bạn muốn xóa một thuộc tính kiểu cụ thể bị ghi đè, bạn có thể đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

405 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

636 [chuỗi trống] cho thuộc tính đó

Nhận giá trị số của thuộc tính kiểu theo đơn vị ưa thích có thể được sử dụng để tính toán

• Tên

  Tên của thuộc tính style cần lấy

Thông tin chi tiết

• Kích thước [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  637] tính bằng pixel
• Lần [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  638] tính bằng mili giây
• Góc [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  639] tính bằng radian
• Số đơn giản [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  640] là đơn vị
• Màu sắc [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  641] nằm trong mảng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  642 có giá trị trên [0, 255]
• Danh sách các số [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  643] nằm trong mảng
• Phần trăm nằm trong phạm vi [0, 1] để chúng hữu ích cho việc tính toán
• Một số thuộc tính không thể xác định đơn vị ưa thích, chẳng hạn như

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  644 — ví dụ: có thể là ở

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  645 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  646. Một thuộc tính như thế này được trả về theo đơn vị như được chỉ định trong kiểu của phần tử [e. g. biểu định kiểu]. Trong trường hợp này, các đơn vị có thể được trả lại một cách rõ ràng thông qua

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  647
• Các giá trị không thể biểu thị dưới dạng số [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  549] được trả về dưới dạng chuỗi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

649 sẽ trả về

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

650 cho nút rộng 30px, ngay cả khi nút được chỉ định là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

651

Nhận các đơn vị mà

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

275 được biểu thị bằng, cho một thuộc tính cụ thể

đàn bầu. numericStyleUnits[ , tên ]

• Tên

  Tên của thuộc tính style cần lấy

Nhận xem phần tử có phải là [i. e.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

653 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

654]

Nhận xem phần tử có hiển thị hay không

Nhận xem phần tử có bị ẩn hay không

Lấy độ mờ hiệu quả của phần tử [i. e. độ mờ trên màn hình], có tính đến độ mờ của nút cha

Nhận xem độ mờ hiệu quả của phần tử có hoàn toàn trong suốt hay không, điều này có tính đến độ mờ của nút cha

hoạt hình

Nhận xem phần tử hiện đang được làm động

• tùy chọn

  Một đối tượng chứa các chi tiết của hoạt ảnh

  • Một vị trí mà các yếu tố sẽ được làm động

  • Một vị trí được kết xuất mà các phần tử sẽ được làm động

  • Một đối tượng chứa các cặp thuộc tính kiểu tên-giá trị để tạo hiệu ứng động

  • khoảng thời gian

    Thời lượng của hoạt ảnh tính bằng mili giây

  • xếp hàng

    Một giá trị boolean cho biết có nên xếp hàng hoạt ảnh hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206]

  • Một chuỗi kiểu nới lỏng định hình đường cong tiến trình hoạt ảnh

  • hoàn thành

    Một chức năng để gọi khi hoạt hình được thực hiện

  • bươc

    Một chức năng để gọi mỗi khi các bước hoạt hình

Thông tin chi tiết

Lưu ý rằng bạn chỉ có thể chỉ định một trong số

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

657 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

658. Bạn không thể tạo hiệu ứng động cho hai vị trí cùng một lúc

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

74

• tùy chọn

  Một đối tượng chứa các chi tiết của hoạt ảnh

  • Một vị trí mà các yếu tố sẽ được làm động

  • Một vị trí được kết xuất mà các phần tử sẽ được làm động

  • Một đối tượng chứa các cặp thuộc tính kiểu tên-giá trị để tạo hiệu ứng động

  • khoảng thời gian

    Thời lượng của hoạt ảnh tính bằng mili giây

  • Một chuỗi kiểu nới lỏng định hình đường cong tiến trình hoạt ảnh

  • hoàn thành

    Một chức năng để gọi khi hoạt hình được thực hiện

  • bươc

    Một chức năng để gọi mỗi khi các bước hoạt hình

Thêm độ trễ giữa các hình động được xếp hàng đợi cho các phần tử

eles. độ trễ[ , thời lượng, hoàn thành ]

• khoảng thời gian

  Độ trễ sẽ kéo dài bao lâu tính bằng mili giây

• hoàn thành

  Một chức năng để gọi khi độ trễ hoàn thành

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

75

đàn bầu. delayAnimation[ , thời lượng ]

• khoảng thời gian

  Độ trễ sẽ kéo dài bao lâu tính bằng mili giây

Dừng tất cả các hoạt ảnh hiện đang chạy

eles. dừng[ , clearQueue, jumpToEnd ]

• ClearQueue

  Một boolean, cho biết liệu hàng đợi hoạt ảnh có nên được làm trống hay không

• nhảy đến cuối

  Một giá trị boolean, cho biết liệu các hoạt ảnh đang chạy có nên chuyển đến hết thay vì chỉ dừng giữa chừng hay không

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

76

Xóa tất cả các hoạt ảnh đã xếp hàng đợi cho các phần tử

so sánh

Xác định xem bộ sưu tập này có chứa chính xác các thành phần giống như bộ sưu tập khác không

• Các yếu tố khác để so sánh với

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

77

Xác định xem bộ sưu tập này có chứa bất kỳ yếu tố nào giống với bộ sưu tập khác không

• Các yếu tố khác để so sánh với

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

78

Xác định xem bộ sưu tập này có chứa tất cả các thành phần của bộ sưu tập khác không

• Các yếu tố khác để so sánh với

Xác định xem tất cả các phần tử trong bộ sưu tập đã chỉ định có nằm trong vùng lân cận của bộ sưu tập đang gọi hay không

eles. allAreNeighbors[ , eles ]

• Các yếu tố khác để so sánh với

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

79

Xác định xem có phần tử nào trong bộ sưu tập này khớp với bộ chọn không

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

10

Xác định xem tất cả các phần tử trong bộ sưu tập có khớp với bộ chọn không

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

11

Xác định xem có bất kỳ phần tử nào trong bộ sưu tập này thỏa mãn chức năng kiểm tra được chỉ định hay không

eles. một số[ , hàm[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm kiểm tra trả về giá trị trung thực cho các phần tử thỏa mãn bài kiểm tra và giá trị sai cho các phần tử không thỏa mãn bài kiểm tra

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các yếu tố đang được thử nghiệm

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong chức năng kiểm tra

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

12

Xác định xem tất cả các thành phần trong bộ sưu tập này có đáp ứng chức năng kiểm tra được chỉ định hay không

eles. mọi[ , function[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm kiểm tra trả về giá trị trung thực cho các phần tử thỏa mãn bài kiểm tra và giá trị sai cho các phần tử không thỏa mãn bài kiểm tra

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các yếu tố đang được thử nghiệm

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong chức năng kiểm tra

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

13

lặp lại

Lấy số phần tử trong tập hợp

Nhận xem bộ sưu tập có trống không, nghĩa là nó không có phần tử nào

Nhận xem bộ sưu tập có trống không

Nhận xem bộ sưu tập có trống không

Lặp lại các phần tử trong bộ sưu tập

eles. forEach[ , function[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm thực thi mỗi lần lặp

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các phần tử được lặp lại

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong hàm lặp

Thông tin chi tiết

Chức năng này hoạt động giống như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

663 với những thay đổi nhỏ để thuận tiện

• Bạn có thể thoát khỏi vòng lặp sớm bằng cách trả về

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  435 trong hàm lặp. Việc triển khai

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  663 không hỗ trợ điều này, nhưng dù sao thì nó cũng được đưa vào do tiện ích của nó

ví dụ

Nhận một phần tử tại một chỉ mục cụ thể trong bộ sưu tập

• mục lục

  Chỉ mục của phần tử cần lấy

Lấy phần tử đầu tiên trong bộ sưu tập

Lấy phần tử cuối cùng trong bộ sưu tập

Nhận một tập hợp con của các phần tử trong bộ sưu tập dựa trên các chỉ số được chỉ định

eles. lát cắt[ [, bắt đầu] [, kết thúc] ]

• bắt đầu [tùy chọn]

  Một số nguyên xác định nơi bắt đầu lựa chọn. Phần tử đầu tiên có chỉ số là 0. Sử dụng số âm để chọn từ cuối mảng

• kết thúc [tùy chọn]

  Một số nguyên xác định nơi kết thúc lựa chọn. Nếu bỏ qua thì tất cả các phần tử từ vị trí đầu đến cuối mảng sẽ được chọn. Sử dụng số âm để chọn từ cuối mảng

Lấy bộ sưu tập dưới dạng một mảng, duy trì thứ tự của các phần tử

Xây dựng & lọc

Nhận một phần tử trong bộ sưu tập từ ID của nó theo cách rất hiệu quả

• Tôi

  ID của phần tử cần lấy

Nhận một bộ sưu tập mới, kết quả từ việc thêm bộ sưu tập với một bộ sưu tập khác

• Các phần tử trong biểu đồ khớp với bộ chọn này được thêm vào

ví dụ

Với một bộ sưu tập

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

14

Với một bộ chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

15

Nhận một bộ sưu tập mới, kết quả từ bộ sưu tập không có một số phần tử được chỉ định

• Các yếu tố sẽ không có trong bộ sưu tập kết quả

eles. chênh lệch[ , bộ chọn ]

• Các phần tử từ bộ sưu tập cuộc gọi phù hợp với bộ chọn này sẽ không có trong bộ sưu tập kết quả

ví dụ

Với một bộ sưu tập

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

16

Với một bộ chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

17

eles. bổ sung tuyệt đối[]

Nhận tất cả các phần tử trong biểu đồ không có trong bộ sưu tập cuộc gọi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

18

Nhận các phần tử trong cả bộ sưu tập này và bộ sưu tập được chỉ định khác

• Các phần tử giao nhau với

eles. giao lộ[ , bộ chọn ]

• Một bộ chọn đại diện cho các phần tử để giao nhau với. Tất cả các phần tử trong biểu đồ khớp với bộ chọn được sử dụng làm bộ sưu tập đã qua

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

19

eles. đối xứngDifference[]

Nhận các phần tử trong bộ sưu tập đang gọi hoặc bộ sưu tập đã qua nhưng không có trong cả hai

eles. symmetricDifference[ , eles ]

• Các yếu tố để áp dụng sự khác biệt đối xứng với

eles. symmetricDifference[ , bộ chọn ]

• Một bộ chọn đại diện cho các phần tử để áp dụng sự khác biệt đối xứng với. Tất cả các phần tử trong biểu đồ khớp với bộ chọn được sử dụng làm bộ sưu tập đã qua

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

00

Thực hiện khác biệt trái/phải truyền thống trên hai bộ sưu tập

• Các yếu tố ở phía bên phải của diff

• Một bộ chọn đại diện cho các phần tử ở phía bên phải của diff. Tất cả các phần tử trong biểu đồ khớp với bộ chọn được sử dụng làm bộ sưu tập đã qua

Thông tin chi tiết

Hàm này trả về một đối tượng đơn giản có dạng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

666 trong đó

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  667 là tập hợp các phần tử chỉ trong cách gọi [i. e. trái] bộ sưu tập,

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  668 là tập hợp các phần tử chỉ trong thông qua [i. e. đúng] bộ sưu tập, và

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  669 là tập hợp các phần tử trong cả hai bộ sưu tập

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

01

Thực hiện hợp nhất tại chỗ các phần tử đã cho vào bộ sưu tập cuộc gọi

• Các yếu tố để hợp nhất tại chỗ

• Một bộ chọn đại diện cho các phần tử để hợp nhất. Tất cả các phần tử trong biểu đồ khớp với bộ chọn được sử dụng làm bộ sưu tập đã qua

Thông tin chi tiết

ví dụ

Với một bộ sưu tập

Với một bộ chọn

Thực hiện thao tác tại chỗ trên bộ sưu tập đang gọi để xóa các phần tử đã cho

• Các yếu tố để loại bỏ tại chỗ

• Một bộ chọn đại diện cho các phần tử để loại bỏ. Tất cả các phần tử trong biểu đồ khớp với bộ chọn được sử dụng làm bộ sưu tập đã qua

Thông tin chi tiết

ví dụ

Với một bộ sưu tập

Với một bộ chọn

Nhận một bộ sưu tập mới chứa các phần tử được chấp nhận bởi chức năng bộ lọc hoặc bộ chọn đã chỉ định

eles. bộ lọc[ , function[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm lọc trả về giá trị trung thực cho các phần tử để bao gồm và giá trị sai cho các phần tử để loại trừ

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các phần tử được lọc

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong hàm lặp

Lấy các phần tử khớp với bộ chọn đã chỉ định

Nhận các nút khớp với bộ chọn đã chỉ định

Lấy các cạnh khớp với bộ chọn đã chỉ định

ví dụ

Với một bộ chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

02

Với một chức năng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

03

Nhận một bộ sưu tập mới chứa các phần tử được sắp xếp theo chức năng so sánh đã chỉ định

eles. sắp xếp[ , hàm[ele1, ele2] ]

• chức năng [ele1, ele2]

  Hàm so sánh sắp xếp trả về một số âm cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  671 trước

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  672, 0 cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  671 giống như

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  672 hoặc một số dương cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  671 sau

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  672

ví dụ

Nhận bộ sưu tập các nút theo thứ tự tăng trọng lượng

Nhận một mảng chứa các giá trị được ánh xạ từ bộ sưu tập

eles. map[ , function[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm trả về giá trị được ánh xạ cho từng phần tử

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các phần tử được ánh xạ

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong hàm lặp

ví dụ

Nhận một mảng các trọng số nút

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

04

Giảm một giá trị bằng cách áp dụng một hàm đối với bộ tích lũy và từng giá trị của bộ sưu tập

eles. reduce[ , function[prevVal, ele, i, ele] ]

• hàm [prevVal, ele, i, ele]

  Hàm trả về giá trị tích lũy cho giá trị trước đó và phần tử hiện tại

  • trướcVal

    Giá trị tích lũy từ các phần tử trước đó

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Bộ sưu tập các yếu tố được giảm

ví dụ

Tham gia các ID nút thành một chuỗi được phân tách bằng dấu phẩy

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

05

Tìm giá trị nhỏ nhất trong tập hợp

eles. min[ , function[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm trả về giá trị để so sánh cho từng phần tử

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các phần tử được tìm kiếm

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong hàm lặp

Thông tin chi tiết

Hàm này trả về một đối tượng với các trường sau

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  679. Giá trị tối thiểu được tìm thấy

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  64. Phần tử tương ứng với giá trị nhỏ nhất

ví dụ

Tìm nút có trọng số tối thiểu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

06

Tìm một giá trị lớn nhất và phần tử tương ứng

eles. max[ , function[ele, i, eles] [, thisArg] ]

• hàm [ele, i, ele]

  Hàm trả về giá trị để so sánh cho từng phần tử

  • yếu tố hiện tại

  • i

    Chỉ số của phần tử hiện tại

  • Tập hợp các phần tử được tìm kiếm

• thisArg [tùy chọn]

  Giá trị cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  660 trong hàm lặp

Thông tin chi tiết

Hàm này trả về một đối tượng với các trường sau

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  679. Giá trị tối đa được tìm thấy

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  64. Phần tử tương ứng với giá trị lớn nhất

ví dụ

Tìm nút có trọng số lớn nhất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

07

đi ngang qua

Lấy vùng lân cận của các phần tử

eles. vùng lân cận[ [, bộ chọn] ]

Lấy vùng lân cận mở của các phần tử

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

eles. openNeighborhood[ [, bộ chọn] ]

Lấy vùng lân cận mở của các phần tử

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

eles. Vùng lân cận đã đóng[ [, bộ chọn] ]

Lấy vùng lân cận đóng của các phần tử

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

Thông tin chi tiết

Vùng lân cận được trả về bởi hàm này hơi khác một chút so với định nghĩa truyền thống về “vùng lân cận”. Vùng lân cận được trả về này bao gồm các cạnh kết nối bộ sưu tập với vùng lân cận. Điều này giúp bạn linh hoạt hơn

Một lân cận mở là một lân cận không bao gồm tập hợp các phần tử ban đầu. Nếu không được chỉ định, một vùng lân cận được mở theo mặc định

Một lân cận đóng là một lân cận bao gồm tập hợp các phần tử ban đầu

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

08

Nhận các thành phần được kết nối

Nhận các thành phần được kết nối, chỉ xem xét các thành phần trong bộ sưu tập cuộc gọi. Một mảng các bộ sưu tập được trả về, với mỗi bộ sưu tập đại diện cho một thành phần

Nhận các thành phần được kết nối mà các thành phần được truyền thuộc về. Các thành phần chỉ xem xét sơ đồ con được tạo bởi các phần tử trong tập hợp cuộc gọi. Một mảng các bộ sưu tập được trả về, với mỗi bộ sưu tập đại diện cho một thành phần

• Các thành phần chứa các phần tử này được trả về

Nhận thành phần được kết nối cho thành phần gọi. Thành phần xem xét tất cả các phần tử trong biểu đồ

Nhận các cạnh kết nối bộ sưu tập với bộ sưu tập khác. Hướng của các cạnh không quan trọng

• Bộ sưu tập khác

điểm giao. cạnhWith[ , bộ chọn ]

• Bộ sưu tập khác, được chỉ định làm bộ chọn phù hợp với tất cả các phần tử trong biểu đồ

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

09

Lấy các cạnh đến từ bộ sưu tập [i. e. nguồn] đi đến một bộ sưu tập khác [tôi. e. mục tiêu]

• Bộ sưu tập khác

• Bộ sưu tập khác, được chỉ định làm bộ chọn phù hợp với tất cả các phần tử trong biểu đồ

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

10

Nhận các nút được kết nối với các cạnh trong bộ sưu tập

cạnh. Các nút được kết nối[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

11

Nhận các cạnh được kết nối với các nút trong bộ sưu tập

điểm giao. connectEdges[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

12

Nhận nút nguồn của cạnh này

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

13

Nhận các nút nguồn được kết nối với các cạnh trong bộ sưu tập

cạnh. nguồn[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

14

Nhận nút đích của cạnh này

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

15

Nhận các nút đích được kết nối với các cạnh trong bộ sưu tập

cạnh. mục tiêu[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

16

Nhận các cạnh song song với các cạnh trong bộ sưu tập

cạnh. các cạnh song song[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

Thông tin chi tiết

Hai cạnh được gọi là song song nếu chúng nối hai nút giống nhau. Bất kỳ hai cạnh song song nào cũng có thể kết nối các nút theo cùng một hướng, trong trường hợp đó, các cạnh chia sẻ cùng một nguồn và đích. Ngoài ra, chúng có thể kết nối các nút theo hướng ngược lại, trong trường hợp đó, nguồn và đích bị đảo ngược ở cạnh thứ hai

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

17

Nhận các cạnh được mã hóa theo các cạnh trong bộ sưu tập

cạnh. codirectedEdges[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

Thông tin chi tiết

Hai cạnh được gọi là đồng hướng nếu chúng kết nối hai nút giống nhau theo cùng một hướng. Các cạnh có cùng nguồn và đích

ví dụ

Từ tập các nút đang gọi, lấy các nút là gốc [i. e. không có cạnh tới, như trong đồ thị tuần hoàn có hướng]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

Từ tập hợp các nút gọi, lấy các nút là lá [i. e. không có cạnh đi ra ngoài, như trong đồ thị tuần hoàn có hướng]

điểm giao. lá[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

Nhận các cạnh [và mục tiêu của chúng] ra khỏi các nút trong bộ sưu tập

điểm giao. người ngoài cuộc[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

Nhận những người hướng ngoại của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

408

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

18

Đệ quy lấy các cạnh [và mục tiêu của chúng] ra khỏi các nút trong tập hợp [i. e. người ngoài cuộc, người ngoài cuộc của người ngoài cuộc,…]

điểm giao. người kế nhiệm[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

Nhận người kế vị của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

408

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

19

Nhận các cạnh [và nguồn của chúng] đi vào các nút trong bộ sưu tập

điểm giao. người có thu nhập[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

Nhận thu nhập của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

408

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

20

Đệ quy lấy các cạnh [và nguồn của chúng] đi vào các nút trong bộ sưu tập [i. e. người thu nhập, người thu nhập của người thu nhập,…]

điểm giao. người tiền nhiệm[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn tùy chọn được sử dụng để lọc bộ sưu tập kết quả

ví dụ

Nhận tiền thân của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

408

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

21

Tìm kiếm

eles. chiều rộng Tìm kiếm đầu tiên[]

eles. chiều rộngTìm kiếm đầu tiên[ , tùy chọn ]

• tùy chọn

  • Các nút gốc [bộ chọn hoặc bộ sưu tập] để bắt đầu tìm kiếm từ

  • chuyến thăm. chức năng [v, e, u, i, độ sâu] [tùy chọn]

    Một hàm xử lý được gọi khi một nút được truy cập trong tìm kiếm. Trình xử lý trả về

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206 khi tìm thấy nút mong muốn và trả về

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435 để hủy tìm kiếm

  • v

    nút hiện tại

  • e

    Cạnh kết nối nút trước đó với nút hiện tại

  • u

    nút trước đó

  • i

    Chỉ số cho biết nút này là nút được truy cập thứ i

  • chiều sâu

    Nút này cách nút gốc bao nhiêu bước nhảy cạnh

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện tìm kiếm theo chiều rộng chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có chứa hai bộ sưu tập [______4691], nút được tìm thấy trong quá trình tìm kiếm và đường dẫn của quá trình tìm kiếm

• Nếu không tìm thấy nút nào, thì

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  692 trống
• Nếu hàm xử lý của bạn trả về

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  435, thì đường dẫn duy nhất đến điểm đó được trả về
• Đường dẫn được trả về bao gồm các cạnh sao cho nếu

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  694 là một nút thì

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  695 là cạnh được sử dụng để đến nút đó

ví dụ

eles. depthFirstSearch[ , tùy chọn ]

• tùy chọn

  • Các nút gốc [bộ chọn hoặc bộ sưu tập] để bắt đầu tìm kiếm từ

  • chuyến thăm. chức năng [v, e, u, i, độ sâu] [tùy chọn]

    Một hàm xử lý được gọi khi một nút được truy cập trong tìm kiếm. Trình xử lý trả về

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206 khi tìm thấy nút mong muốn và trả về

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435 để hủy tìm kiếm

  • v

    nút hiện tại

  • e

    Cạnh kết nối nút trước đó với nút hiện tại

  • u

    nút trước đó

  • i

    Chỉ số cho biết nút này là nút được truy cập thứ i

  • chiều sâu

    Nút này cách nút gốc bao nhiêu bước nhảy cạnh

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện tìm kiếm chuyên sâu chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có chứa hai bộ sưu tập [______4691], nút được tìm thấy trong quá trình tìm kiếm và đường dẫn của quá trình tìm kiếm

• Nếu không tìm thấy nút nào, thì

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  692 trống
• Nếu hàm xử lý của bạn trả về

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  435, thì đường dẫn duy nhất đến điểm đó được trả về
• Đường dẫn được trả về bao gồm các cạnh sao cho nếu

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  694 là một nút thì

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  695 là cạnh được sử dụng để đến nút đó

ví dụ

Thực hiện thuật toán Dijkstra trên các phần tử trong tập hợp. Điều này tìm các đường dẫn ngắn nhất đến tất cả các nút khác trong bộ sưu tập từ nút gốc

• tùy chọn

  • Nút gốc [bộ chọn hoặc bộ sưu tập] nơi thuật toán bắt đầu

  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết chi phí đi từ nút này sang nút khác

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Lưu ý rằng hàm này chỉ thực hiện thuật toán Dijkstra trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có dạng sau

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

205 trả về khoảng cách từ nút nguồn đến

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

207 trả về một tập hợp chứa đường dẫn ngắn nhất từ ​​nút nguồn đến

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66. Đường dẫn bắt đầu với nút nguồn và bao gồm các cạnh giữa các nút trong đường dẫn sao cho nếu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

209 là một cạnh thì

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

210 là nút trước đó trong đường dẫn và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

211 là nút tiếp theo trong đường dẫn

Nếu không có hàm trọng số nào được xác định, trọng số không đổi là 1 được sử dụng cho mỗi cạnh

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

22

Thực hiện thuật toán tìm kiếm A* trên các phần tử trong tập hợp. Điều này tìm đường đi ngắn nhất từ ​​​​nút gốc đến nút mục tiêu

• tùy chọn

  • Nút gốc [bộ chọn hoặc bộ sưu tập] nơi bắt đầu tìm kiếm

  • mục tiêu

    Nút mục tiêu [bộ chọn hoặc bộ sưu tập] nơi tìm kiếm kết thúc

  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết chi phí đi từ nút này sang nút khác

  • tự tìm tòi. chức năng [nút] [tùy chọn]

    Hàm trả về giá trị ước tính [không được đánh giá quá cao] trên khoảng cách ngắn nhất từ ​​nút hiện tại đến mục tiêu

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Lưu ý rằng hàm này chỉ thực hiện tìm kiếm A* trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có dạng sau

Về các tùy chọn tùy chọn

• Nếu không có hàm trọng số nào được xác định, trọng số không đổi là 1 được sử dụng cho mỗi cạnh
• Nếu không có hàm heuristic nào được cung cấp, thì hàm null hằng số sẽ được sử dụng, biến hàm này thành hành vi tương tự như thuật toán Dijkstra. Các heuristic phải đơn điệu [còn gọi là nhất quán] ngoài việc 'được chấp nhận'

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

23

Thực hiện thuật toán tìm kiếm Floyd-Warshall trên các phần tử trong tập hợp. Điều này tìm đường đi ngắn nhất giữa tất cả các cặp nút

eles. floydWarshall[ , tùy chọn ]

• tùy chọn
  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số cho cạnh. Trọng số cho biết chi phí đi từ nút này sang nút khác. Trọng số có thể dương hoặc âm, nhưng không được phép có chu kỳ âm

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Hàm này trả về một đối tượng có dạng sau

Nếu không có hàm trọng số nào được xác định, trọng số không đổi là 1 được sử dụng cho mỗi cạnh

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

24

Thực hiện thuật toán tìm kiếm Bellman-Ford trên các phần tử trong tập hợp. Điều này tìm đường đi ngắn nhất từ ​​nút bắt đầu đến tất cả các nút khác trong bộ sưu tập

eles. bellmanFord[ , tùy chọn ]

• tùy chọn

  • Nút gốc [bộ chọn hoặc bộ sưu tập] nơi bắt đầu tìm kiếm

  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số cho cạnh. Trọng số cho biết chi phí đi từ nút này sang nút khác. Trọng số có thể dương hoặc âm

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Hàm này trả về một đối tượng có dạng sau

Nếu không có hàm trọng số nào được xác định, trọng số không đổi là 1 được sử dụng cho mỗi cạnh

Thuật toán Bellman-Ford rất tốt trong việc phát hiện các chu kỳ trọng số âm, nhưng nó không thể trả về kết quả đường đi hoặc khoảng cách nếu nó tìm thấy chúng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

25

Thực hiện thuật toán tìm kiếm các phần tử trong tập hợp. Điều này tìm thấy những con đường mòn và mạch Euler

eles. phân cấp[ , tùy chọn ]

• tùy chọn
  • [không bắt buộc]

    Nút gốc [bộ chọn hoặc bộ sưu tập] nơi bắt đầu tìm kiếm

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có nên chỉ đi dọc theo các cạnh từ nguồn đến đích hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]

Thông tin chi tiết

Lưu ý rằng hàm này chỉ thực hiện thuật toán của Hierholzer trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có dạng sau

Về các tùy chọn tùy chọn

• Nếu không có nút gốc nào được cung cấp, nút đầu tiên trong tập hợp sẽ được lấy làm nút bắt đầu trong thuật toán
• Đồ thị được coi là vô hướng trừ khi có quy định khác

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

26

kéo dài

Thực hiện thuật toán Kruskal trên các phần tử trong tập hợp, trả về cây khung nhỏ nhất, giả sử các cạnh vô hướng

eles. kruskal[ [, chức năng[cạnh]] ]

• chức năng [cạnh] [tùy chọn]

  Hàm trả về trọng số dương cho cạnh

Thông tin chi tiết

Lưu ý rằng hàm này chạy thuật toán của Kruskal trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

27

Cắt

Tìm đường cắt nhỏ nhất trong đồ thị bằng thuật toán. Kết quả tối ưu được tìm thấy với xác suất cao, nhưng không có bảo đảm

Thông tin chi tiết

Hàm này trả về một đối tượng có dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

28

eles. hopcroftTarjanBiconnected[]

Tìm các thành phần liên thông trong một đồ thị vô hướng, cũng như các đỉnh cắt tương ứng của chúng, sử dụng thuật toán của Hopcroft và Tarjan

Thông tin chi tiết

Lưu ý rằng chức năng này xác định các thành phần được kết nối hai chiều và chỉ cắt các đỉnh trong tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

29

eles. tarjanKết nối mạnh mẽ[]

Thông tin chi tiết

Lưu ý rằng hàm này chỉ xác định các thành phần được kết nối mạnh trong tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

30

tính trung tâm

Chỉ xem xét các phần tử trong tập hợp cuộc gọi, hãy tính giá trị của nút gốc đã chỉ định

eles. độCentrality[ , tùy chọn ]

• tùy chọn

  • Nút gốc [bộ chọn hoặc bộ sưu tập] mà phép tính trung tâm được thực hiện

  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết mức độ quan trọng của cạnh, với giá trị cao thể hiện mức độ quan trọng cao

  • alpha [tùy chọn]

    Giá trị alpha cho phép tính trung tâm, nằm trong [0, 1]. Với giá trị 0 [mặc định], bỏ qua trọng số cạnh và chỉ sử dụng số cạnh trong tính toán trọng tâm. Với giá trị 1, bỏ qua số cạnh và chỉ sử dụng trọng số cạnh trong tính toán trọng tâm

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu tính trung tâm của cấp độ và cấp độ trực tiếp có được tính toán hay không [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206] hoặc tính toán tính trung tâm không theo hướng dẫn [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định]

Thông tin chi tiết

Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

218, hàm này trả về một đối tượng có dạng sau

Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

219, hàm này trả về một đối tượng có dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

31

eles. độCentralityNormalized[]

Chỉ xem xét các phần tử trong tập hợp cuộc gọi, hãy tính toán chuẩn hóa của các nút

eles. độCentralityChuẩn hóa[ , tùy chọn ]

• tùy chọn
  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết mức độ quan trọng của cạnh, với giá trị cao thể hiện mức độ quan trọng cao

  • alpha [tùy chọn]

    Giá trị alpha cho phép tính trung tâm, nằm trong [0, 1]. Với giá trị 0 [mặc định], bỏ qua trọng số cạnh và chỉ sử dụng số cạnh trong tính toán trọng tâm. Với giá trị 1, bỏ qua số cạnh và chỉ sử dụng trọng số cạnh trong tính toán trọng tâm

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu tính trung tâm của cấp độ và cấp độ trực tiếp có được tính toán hay không [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206] hoặc tính toán tính trung tâm không theo hướng dẫn [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định]

Thông tin chi tiết

Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

218, hàm này trả về một đối tượng có dạng sau

Đối với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

219, hàm này trả về một đối tượng có dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

32

eles. sự gần gũi Centrality[]

Chỉ xem xét các phần tử trong tập hợp cuộc gọi, hãy tính toán mức độ gần trung tâm của nút gốc đã chỉ định

eles. sự gần gũi Tính trung tâm[ , tùy chọn ]

• tùy chọn

  • Nút gốc [bộ chọn hoặc bộ sưu tập] mà phép tính trung tâm được thực hiện

  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết mức độ quan trọng của cạnh, với giá trị cao thể hiện mức độ quan trọng cao

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có hoạt động trên các cạnh theo cách có hướng từ nguồn đến đích [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206] hay liệu thuật toán có hoạt động theo cách không có hướng [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định]

  • điều hòa [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán tính giá trị trung bình điều hòa [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206, mặc định] hay giá trị trung bình số học [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435] của khoảng cách. Giá trị trung bình điều hòa rất hữu ích cho các biểu đồ không được kết nối mạnh

Thông tin chi tiết

Hàm này trả về trực tiếp giá trị trung tâm độ gần bằng số cho nút gốc đã chỉ định

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

33

eles. sự gần gũi Tính tập trung Bình thường hóa []

Chỉ xem xét các phần tử trong tập hợp cuộc gọi, hãy tính toán mức độ trung tâm gần gũi của các nút

eles. closenessCentralityChuẩn hóa[ , tùy chọn ]

• tùy chọn
  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết mức độ quan trọng của cạnh, với giá trị cao thể hiện mức độ quan trọng cao

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có hoạt động trên các cạnh theo cách có hướng từ nguồn đến đích [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206] hay liệu thuật toán có hoạt động theo cách không có hướng [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định]

  • điều hòa [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán tính giá trị trung bình điều hòa [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206, mặc định] hay giá trị trung bình số học [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435] của khoảng cách. Giá trị trung bình điều hòa rất hữu ích cho các biểu đồ không được kết nối mạnh

Thông tin chi tiết

Hàm này trả về một đối tượng có dạng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

34

eles. giữa tính trung tâm []

eles. betweennessCentrality[ , tùy chọn ]

• tùy chọn
  • trọng lượng. chức năng [cạnh] [tùy chọn]

    Hàm trả về trọng số dương cho cạnh. Trọng số cho biết mức độ quan trọng của cạnh, với giá trị cao thể hiện mức độ quan trọng cao

  • chỉ đạo [tùy chọn]

    Một giá trị boolean cho biết liệu thuật toán có hoạt động trên các cạnh theo cách có hướng từ nguồn đến đích [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    206] hay liệu thuật toán có hoạt động theo cách không có hướng [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435, mặc định]

Thông tin chi tiết

Hàm này trả về một đối tượng có dạng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

35

Xếp hạng các nút trong bộ sưu tập bằng thuật toán Xếp hạng trang

• tùy chọn
  • hệ số giảm chấn [tùy chọn]

    , ảnh hưởng đến thời gian thuật toán đi theo cấu trúc liên kết của biểu đồ [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    234]

  • độ chính xác [tùy chọn]

    Tham số số đại diện cho độ chính xác được yêu cầu [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    235]. Thuật toán dừng khi chênh lệch giữa các lần lặp là giá trị này hoặc nhỏ hơn

  • lặp lại [tùy chọn]

    Số lần lặp lại tối đa để thực hiện [mặc định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    236]

Thông tin chi tiết

Hàm này trả về một đối tượng có dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

36

phân cụm

eles. markovClustering[ , tùy chọn ]

• tùy chọn
  • thuộc tính. [ chức năng [cạnh]. ]

    Một mảng các hàm thuộc tính, mỗi hàm trả về một giá trị thuộc tính số cho cạnh đã chỉ định. Các thuộc tính được sử dụng để nhóm các nút; . e. các thuộc tính của một cạnh biểu thị sự giống nhau giữa các nút của nó

  • expandFactor [tùy chọn]

    Một số ảnh hưởng đến thời gian tính toán và độ chi tiết của cụm ở một mức độ nào đó.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    237 [mặc định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    238]

  • hệ số thổi phồng [tùy chọn]

    Một số ảnh hưởng đến độ chi tiết của cụm [giá trị càng lớn, càng có nhiều cụm].

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    239 [mặc định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    238]

  • multiFactor [tùy chọn]

    Số lượng vòng tự tùy chọn cho mỗi nút. Sử dụng giá trị trung tính để cải thiện tính toán cụm [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    467]

  • maxIterations [tùy chọn]

    Số lần lặp tối đa của thuật toán MCL trong một lần chạy [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    242]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện phân cụm Markov chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi. Phân cụm Markov sử dụng cấu trúc liên kết của biểu đồ và các thuộc tính cạnh được chỉ định để xác định các cụm

Hàm này trả về một mảng, chứa các bộ sưu tập. Mỗi bộ sưu tập trong mảng là một cụm được tìm thấy bởi thuật toán phân cụm Markov

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

37

Chỉ xem xét các nút trong tập hợp cuộc gọi, hãy tính toán cụm k-means của các nút

• tùy chọn
  • thuộc tính. [ chức năng[ nút ]. ]

    Một mảng các hàm thuộc tính, mỗi hàm trả về một giá trị thuộc tính số cho nút đã chỉ định. Các thuộc tính được sử dụng để nhóm các nút; . e. hai nút có thuộc tính giống nhau có xu hướng nằm trong cùng một cụm. Mỗi thuộc tính có thể phải được chuẩn hóa để số liệu khoảng cách đã chọn có ý nghĩa. Các thuộc tính phải được chỉ định trừ khi một

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    243 tùy chỉnh được chỉ định

  • k

    Số lượng cụm để trả về

  • khoảng cách

    Bộ phân loại khoảng cách được sử dụng để so sánh các vectơ thuộc tính. Nó là tùy chọn nếu các thuộc tính được chỉ định. Nó có thể nhận một trong nhiều giá trị

  • 'euclide'

    khoảng cách Euclide [mặc định]

  • 'bình phương Euclide'

  • 'thành phố Manhattan'

    khoảng cách Manhattan

  • 'tối đa'

    Khoảng cách tối đa

  • hàm [độ dài, getPAt, getQAt[, nodeP, nodeQ] ]

    Hàm tùy chỉnh trả về khoảng cách giữa các vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • chiều dài

    Độ dài của vectơ

  • getPAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244

  • getQAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • maxIterations [tùy chọn]

    Số lần lặp tối đa của thuật toán để chạy [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    248]

  • Ngưỡng nhạy cảm [tùy chọn]

    Ngưỡng chênh lệch hệ số được sử dụng để xác định xem thuật toán đã hội tụ hay chưa [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    249]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện phân cụm k-means chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi. K-means thường không tính đến cấu trúc liên kết của biểu đồ

Hàm này trả về một mảng, chứa các bộ sưu tập. Mỗi bộ sưu tập trong mảng là một cụm được thuật toán tìm thấy

Một trong những điểm khác biệt chính giữa thuật toán k-means và k-medoids là cách khởi tạo trung tâm cụm. Trong k-means, các trung tâm cụm [centroid] là các vectơ có các phần tử được khởi tạo thành các giá trị ngẫu nhiên trong phạm vi của mỗi thứ nguyên. Trong k-medoids, trung tâm cụm [medoids] là các nút ngẫu nhiên từ tập dữ liệu

Khác là thuật toán k-means xác định trung tâm cụm mới bằng cách lấy giá trị trung bình của tất cả các nút trong cụm đó, trong khi k-medoids chọn nút có chi phí cấu hình thấp nhất làm trung tâm cụm mới

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

38

Chỉ xem xét các nút trong tập hợp cuộc gọi, hãy tính toán phân cụm k-medoids của các nút

• tùy chọn
  • thuộc tính. [ chức năng[ nút ]. ]

    Một mảng các hàm thuộc tính, mỗi hàm trả về một giá trị thuộc tính số cho nút đã chỉ định. Các thuộc tính được sử dụng để nhóm các nút; . e. hai nút có thuộc tính giống nhau có xu hướng nằm trong cùng một cụm. Mỗi thuộc tính có thể phải được chuẩn hóa để số liệu khoảng cách đã chọn có ý nghĩa. Các thuộc tính phải được chỉ định trừ khi một

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    243 tùy chỉnh được chỉ định

  • k

    Số lượng cụm để trả về

  • khoảng cách

    Bộ phân loại khoảng cách được sử dụng để so sánh các vectơ thuộc tính. Nó là tùy chọn nếu các thuộc tính được chỉ định. Nó có thể nhận một trong nhiều giá trị

  • 'euclide'

    khoảng cách Euclide [mặc định]

  • 'bình phương Euclide'

  • 'thành phố Manhattan'

    khoảng cách Manhattan

  • 'tối đa'

    Khoảng cách tối đa

  • hàm [độ dài, getPAt, getQAt[, nodeP, nodeQ] ]

    Hàm tùy chỉnh trả về khoảng cách giữa các vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • chiều dài

    Độ dài của vectơ

  • getPAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244

  • getQAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • nútP [tùy chọn]

    Một tham chiếu được sử dụng tùy chọn cho nút được liên kết với vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244. Nó rất hữu ích để tác động đến các trọng số với thông tin bên ngoài các thuộc tính, chẳng hạn như kết nối

  • nútQ [tùy chọn]

    Một tham chiếu được sử dụng tùy chọn cho nút được liên kết với vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245. Nó rất hữu ích để tác động đến các trọng số với thông tin bên ngoài các thuộc tính, chẳng hạn như kết nối

  • chức năng [nútP, nútQ]

    Hàm tùy chỉnh trả về khoảng cách giữa

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    257 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    258. Điều này cho phép xác định trực tiếp ma trận khoảng cách, từ bỏ các thuộc tính

  • maxIterations [tùy chọn]

    Số lần lặp tối đa của thuật toán để chạy [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    248]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện phân cụm k-medoids chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi. K-medoids thường không tính đến cấu trúc liên kết

Hàm này trả về một mảng, chứa các bộ sưu tập. Mỗi bộ sưu tập trong mảng là một cụm được thuật toán tìm thấy

Một trong những điểm khác biệt chính giữa thuật toán k-means và k-medoids là cách khởi tạo trung tâm cụm. Trong k-means, các trung tâm cụm [centroid] là các vectơ có các phần tử được khởi tạo thành các giá trị ngẫu nhiên trong phạm vi của mỗi thứ nguyên. Trong k-medoids, trung tâm cụm [medoids] là các nút ngẫu nhiên từ tập dữ liệu

Khác là thuật toán k-means xác định trung tâm cụm mới bằng cách lấy giá trị trung bình của tất cả các nút trong cụm đó, trong khi k-medoids chọn nút có chi phí cấu hình thấp nhất làm trung tâm cụm mới

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

39

điểm giao. FuzzyCMeans[ , tùy chọn ]

• tùy chọn
  • thuộc tính. [ chức năng[ nút ]. ]

    Một mảng các hàm thuộc tính, mỗi hàm trả về một giá trị thuộc tính số cho nút đã chỉ định. Các thuộc tính được sử dụng để nhóm các nút; . e. hai nút có thuộc tính giống nhau có xu hướng nằm trong cùng một cụm. Mỗi thuộc tính có thể phải được chuẩn hóa để số liệu khoảng cách đã chọn có ý nghĩa. Các thuộc tính phải được chỉ định trừ khi một

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    243 tùy chỉnh được chỉ định

  • k

    Số lượng cụm để trả về

  • khoảng cách

    Bộ phân loại khoảng cách được sử dụng để so sánh các vectơ thuộc tính. Nó là tùy chọn nếu các thuộc tính được chỉ định. Nó có thể nhận một trong nhiều giá trị

  • 'euclide'

    khoảng cách Euclide [mặc định]

  • 'bình phương Euclide'

  • 'thành phố Manhattan'

    khoảng cách Manhattan

  • 'tối đa'

    Khoảng cách tối đa

  • hàm [độ dài, getPAt, getQAt[, nodeP, nodeQ] ]

    Hàm tùy chỉnh trả về khoảng cách giữa các vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • chiều dài

    Độ dài của vectơ

  • getPAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244

  • getQAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • maxIterations [tùy chọn]

    Số lần lặp tối đa của thuật toán để chạy [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    248]

  • Ngưỡng nhạy cảm [tùy chọn]

    Ngưỡng chênh lệch hệ số được sử dụng để xác định xem thuật toán đã hội tụ hay chưa [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    249]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện phân cụm c-means mờ chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi

Hàm này trả về một đối tượng có định dạng sau

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

40

điểm giao. phân cấpClustering[]

Chỉ xem xét các phần tử trong tập hợp cuộc gọi, hãy tính toán phân cụm theo cấp bậc tổng hợp của các nút

điểm giao. phân cụm theo thứ bậc[ , tùy chọn ]

• tùy chọn
  • thuộc tính. [ chức năng[ nút ]. ]

    Một mảng các hàm thuộc tính, mỗi hàm trả về một giá trị thuộc tính số cho nút đã chỉ định. Các thuộc tính được sử dụng để nhóm các nút; . e. hai nút có thuộc tính giống nhau có xu hướng nằm trong cùng một cụm. Mỗi thuộc tính có thể phải được chuẩn hóa để số liệu khoảng cách đã chọn có ý nghĩa. Các thuộc tính phải được chỉ định trừ khi một

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    243 tùy chỉnh được chỉ định

  • khoảng cách

    Bộ phân loại khoảng cách được sử dụng để so sánh các vectơ thuộc tính. Nó là tùy chọn nếu các thuộc tính được chỉ định. Nó có thể nhận một trong nhiều giá trị

  • 'euclide'

    khoảng cách Euclide [mặc định]

  • 'bình phương Euclide'

  • 'thành phố Manhattan'

    khoảng cách Manhattan

  • 'tối đa'

    Khoảng cách tối đa

  • hàm [độ dài, getPAt, getQAt[, nodeP, nodeQ] ]

    Hàm tùy chỉnh trả về khoảng cách giữa các vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • chiều dài

    Độ dài của vectơ

  • getPAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244

  • getQAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • nútP [tùy chọn]

    Một tham chiếu được sử dụng tùy chọn cho nút được liên kết với vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244. Nó rất hữu ích để tác động đến các trọng số với thông tin bên ngoài các thuộc tính, chẳng hạn như kết nối

  • nútQ [tùy chọn]

    Một tham chiếu được sử dụng tùy chọn cho nút được liên kết với vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245. Nó rất hữu ích để tác động đến các trọng số với thông tin bên ngoài các thuộc tính, chẳng hạn như kết nối

  • chức năng [nútP, nútQ]

    Hàm tùy chỉnh trả về khoảng cách giữa

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    257 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    258. Điều này cho phép xác định trực tiếp ma trận khoảng cách, từ bỏ các thuộc tính

  • liên kết [tùy chọn]

    Cái để đo khoảng cách giữa hai cụm; . k. a.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    238, mặc định],

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    279 [a. k. a.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    280]

  • cách thức

    Chế độ của thuật toán. Đối với

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    281 [mặc định], các cụm được hợp nhất cho đến khi chúng cách nhau ít nhất một khoảng đã chỉ định. Đối với

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    282, các cụm được hợp nhất đệ quy bằng cách sử dụng các nhánh trong cấu trúc dendrogram [cây] vượt quá độ sâu đã chỉ định

  • ngưỡng

    Trong

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    283, ngưỡng khoảng cách để dừng thuật toán. Tất cả các cặp cụm được trả về cách nhau ít nhất 4284 khoảng cách. Nếu không chỉ định giá trị này cho

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    283, tất cả các cụm cuối cùng sẽ được hợp nhất thành một cụm duy nhất

  • dendrogramĐộ sâu

    Trong

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    286, độ sâu mà các nhánh được hợp nhất trong cây. Ví dụ: giá trị 0 [mặc định] dẫn đến tất cả các nhánh được hợp nhất thành một cụm duy nhất

  • addDendrogram [tùy chọn]

    Trong

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    286, có nên thêm các nút và cạnh vào biểu đồ cho dendrogram hay không [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    435]. Điều này là không cần thiết để chạy thuật toán, nhưng nó rất hữu ích để hiển thị kết quả

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện phân cụm theo thứ bậc chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi. Phân cụm theo thứ bậc thường không tính đến cấu trúc liên kết của biểu đồ

Hàm này trả về một mảng, chứa các bộ sưu tập. Mỗi bộ sưu tập trong mảng là một cụm được thuật toán tìm thấy

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

41

điểm giao. affinityPropagation[]

điểm giao. affinityPropagation[ , tùy chọn ]

• tùy chọn
  • thuộc tính. [ chức năng[ nút ]. ]

    Một mảng các hàm thuộc tính, mỗi hàm trả về một giá trị thuộc tính số cho nút đã chỉ định. Các thuộc tính được sử dụng để nhóm các nút; . e. hai nút có thuộc tính giống nhau có xu hướng nằm trong cùng một cụm. Mỗi thuộc tính có thể phải được chuẩn hóa để số liệu khoảng cách đã chọn có ý nghĩa. Các thuộc tính phải được chỉ định trừ khi một

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    243 tùy chỉnh được chỉ định

  • khoảng cách

    Bộ phân loại khoảng cách được sử dụng để so sánh các vectơ thuộc tính. Nó là tùy chọn nếu các thuộc tính được chỉ định. Nó có thể nhận một trong nhiều giá trị

  • 'euclide'

    khoảng cách Euclide [mặc định]

  • 'bình phương Euclide'

  • 'thành phố Manhattan'

    khoảng cách Manhattan

  • 'tối đa'

    Khoảng cách tối đa

  • hàm [độ dài, getPAt, getQAt[, nodeP, nodeQ] ]

    Hàm tùy chỉnh trả về khoảng cách giữa các vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • chiều dài

    Độ dài của vectơ

  • getPAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244

  • getQAt[i]

    Hàm trả về giá trị thứ i của vectơ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245

  • nútP [tùy chọn]

    Một tham chiếu được sử dụng tùy chọn cho nút được liên kết với vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    244. Nó rất hữu ích để tác động đến các trọng số với thông tin bên ngoài các thuộc tính, chẳng hạn như kết nối

  • nútQ [tùy chọn]

    Một tham chiếu được sử dụng tùy chọn cho nút được liên kết với vectơ thuộc tính

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    245. Nó rất hữu ích để tác động đến các trọng số với thông tin bên ngoài các thuộc tính, chẳng hạn như kết nối

  • chức năng [nútP, nútQ]

    Hàm tùy chỉnh trả về khoảng cách giữa

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    257 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    258. Điều này cho phép xác định trực tiếp ma trận khoảng cách, từ bỏ các thuộc tính

  • ưu tiên [tùy chọn]

    Số liệu được sử dụng để xác định mức độ phù hợp của một điểm dữ liệu [i. e. vector thuộc tính nút] để làm mẫu. Nó có thể nhận một trong vài giá trị đặc biệt, được xác định từ ma trận tương tự [i. e. ma trận khoảng cách âm]. Hoặc một giá trị số, thủ công có thể được sử dụng [thường là dấu ngược lại của các giá trị khoảng cách của bạn]. Các giá trị đặc biệt bao gồm

  • 'Trung bình'

    Sử dụng giá trị trung bình của ma trận tương tự [mặc định]

  • 'bần tiện'

    Sử dụng giá trị trung bình của ma trận tương tự

  • 'phút'

    Sử dụng giá trị tối thiểu của ma trận tương tự

  • 'tối đa'

    Sử dụng giá trị tối đa của ma trận tương tự

  • giảm xóc [tùy chọn]

    Hệ số giảm chấn trên [0. 5, 1] [mặc định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    234]

  • minIterations [tùy chọn]

    Số lần lặp tối thiểu mà thuật toán sẽ chạy trước khi dừng [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    299]

  • maxIterations [tùy chọn]

    Số lần lặp lại tối đa mà thuật toán sẽ chạy trước khi dừng [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    100]

Thông tin chi tiết

Lưu ý rằng chức năng này thực hiện phân cụm lan truyền ái lực chỉ trên tập hợp con của biểu đồ trong tập hợp cuộc gọi. Truyền bá ái lực thường không tính đến cấu trúc liên kết của biểu đồ

Hàm này trả về một mảng, chứa các bộ sưu tập. Mỗi bộ sưu tập trong mảng là một cụm được thuật toán tìm thấy

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

42

nút hợp chất

Các chức năng này áp dụng cho

Nhận xem nút có phải là cha mẹ ghép hay không [i. e. một nút chứa một hoặc nhiều nút con]

Nhận xem nút có phải là con không [i. e. một nút không có nút con]

Nhận xem nút có phải là con ghép hay không [i. e. chứa trong một nút]

Nhận xem nút có phải là nút mồ côi hay không [i. e. một nút không có cha mẹ]

Lấy nút cha tổng hợp của mỗi nút trong bộ sưu tập

điểm giao. cha mẹ[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Nhận tất cả các nút tổ tiên ghép [i. e. cha mẹ, cha mẹ của cha mẹ, v.v. ] của mỗi nút trong bộ sưu tập

điểm giao. tổ tiên[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Nhận tất cả các tổ tiên ghép chung cho tất cả các nút trong bộ sưu tập, bắt đầu với nút gần nhất và dần dần xa hơn

điểm giao. tổ tiên chung[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Thông tin chi tiết

Bạn có thể lấy tổ tiên chung gần nhất qua ________ 5101 và xa nhất qua ________ 5102, vì tổ tiên chung sắp xếp theo mức độ gần gũi giảm dần

Nhận tất cả mồ côi [i. e. không có nút cha mẹ ghép] trong bộ sưu tập cuộc gọi

điểm giao. trẻ mồ côi[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Nhận tất cả nonorphan [i. e. có một cha mẹ ghép] nút trong bộ sưu tập cuộc gọi

điểm giao. trẻ mồ côi[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Lấy tất cả con ghép [i. e. các nút con trực tiếp] của mỗi nút trong bộ sưu tập

điểm giao. trẻ em[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Nhận tất cả hậu duệ ghép [i. e. trẻ em, trẻ em của trẻ em, vv. ] các nút của mỗi nút trong bộ sưu tập

điểm giao. con cháu[ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Nhận tất cả anh chị em [i. e. cùng cha mẹ ghép] của mỗi nút trong bộ sưu tập

điểm giao. anh chị em ruột [ [, bộ chọn] ]

• [không bắt buộc]

  Bộ chọn được sử dụng để lọc bộ sưu tập kết quả

Lưu ý & cảnh báo

Bộ chọn hoạt động tương tự như bộ chọn CSS trên các phần tử DOM, nhưng bộ chọn trong Cytoscape. thay vào đó, js hoạt động trên các bộ sưu tập phần tử biểu đồ. Lưu ý rằng bất cứ nơi nào bộ chọn có thể được chỉ định làm đối số cho hàm, chức năng lọc kiểu - có thể được sử dụng thay cho bộ chọn. Ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

43

Các bộ chọn có thể được kết hợp với nhau để tạo các truy vấn mạnh mẽ trong Cytoscape. js chẳng hạn

Các bộ chọn có thể được nối với nhau [tạo OR logic một cách hiệu quả] bằng dấu phẩy

Điều quan trọng cần lưu ý là các chuỗi cần được đặt trong dấu ngoặc kép

Lưu ý rằng một số ký tự cần được thoát cho ID, tên trường, v.v.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

44

Một số ví dụ về những ký tự này bao gồm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

104. Cố gắng tránh sử dụng các ký tự không phải chữ và số cho tên trường và ID để đơn giản hóa mọi thứ. Nếu bạn phải sử dụng các ký tự đặc biệt cho ID, hãy sử dụng bộ chọn dữ liệu thay vì bộ chọn ID

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

45

Bộ chọn có thể truy cập các phần tử mảng và thuộc tính đối tượng bằng ký hiệu dấu chấm

Nhóm, lớp và ID

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

68 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

107 [bộ chọn nhóm] So khớp các phần tử dựa trên nhóm [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

66 cho các nút,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

68 cho các cạnh,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

107 cho tất cả]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

111 So khớp các phần tử có lớp được chỉ định [e. g. sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

112 cho lớp có tên là “foo”]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

113 So khớp phần tử với ID phù hợp [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

114 giống như

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

115]

Dữ liệu

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

116 So khớp các phần tử nếu chúng có thuộc tính dữ liệu đã chỉ định được xác định, i. e. không phải

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

404 [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

118 cho thuộc tính có tên là “foo”]. Ở đây,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

405 được coi là một giá trị được xác định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

120 So khớp các phần tử nếu thuộc tính dữ liệu đã chỉ định không được xác định, i. e.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

404 [e. g

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

122]. Ở đây,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

405 được coi là một giá trị được xác định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

124 So khớp các phần tử nếu thuộc tính dữ liệu được chỉ định là giá trị trung thực [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

125]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

126 So khớp các phần tử nếu thuộc tính dữ liệu đã chỉ định là một giá trị sai [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

127]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

128 So khớp các phần tử nếu thuộc tính dữ liệu của chúng khớp với một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

129 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

130]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

131 So khớp các phần tử nếu thuộc tính dữ liệu của chúng không khớp với một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

132 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

133]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

134 So khớp các phần tử nếu thuộc tính dữ liệu của chúng lớn hơn một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

135 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

136]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

137 So khớp các phần tử nếu thuộc tính dữ liệu của chúng lớn hơn hoặc bằng một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

138 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

139]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

140 So khớp các phần tử nếu thuộc tính dữ liệu của chúng nhỏ hơn một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

141 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

142]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

143 So khớp các phần tử nếu thuộc tính dữ liệu của chúng nhỏ hơn hoặc bằng một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

144 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

145]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

146 So khớp các phần tử nếu thuộc tính dữ liệu của chúng chứa giá trị đã chỉ định dưới dạng chuỗi con [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

147]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

148 So khớp các phần tử nếu thuộc tính dữ liệu của chúng bắt đầu bằng giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

149]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

150 So khớp các phần tử nếu thuộc tính dữ liệu của chúng kết thúc bằng giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

151]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

152 So khớp các phần tử nếu thuộc tính dữ liệu của chúng là một mảng và phần tử tại chỉ mục đã xác định khớp với một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

153]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

154 So khớp các phần tử nếu thuộc tính dữ liệu của chúng là một đối tượng và thuộc tính có tên đã xác định khớp với một giá trị đã chỉ định [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

155]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

156 [công cụ sửa đổi toán tử thuộc tính dữ liệu] Được thêm vào trước một toán tử để không phân biệt chữ hoa chữ thường [e. g. ________ 5157, ________ 5158, ________ 5159]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

160 [công cụ sửa đổi toán tử thuộc tính dữ liệu] Được thêm vào trước một toán tử để nó bị phủ định [e. g. ________ 5161, ________ 5162]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

163 [dấu ngoặc vuông siêu dữ liệu] Sử dụng dấu ngoặc vuông kép thay cho dấu ngoặc vuông để khớp với siêu dữ liệu thay vì dữ liệu [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

164 khớp với các phần tử có mức độ lớn hơn 2]. Các thuộc tính được hỗ trợ bao gồm

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

165,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

166 và

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

167

nút hợp chất

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

168 [bộ chọn con] So khớp các nút con trực tiếp của nút cha [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

169]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

170 [bộ chọn hậu duệ] So khớp các hậu duệ của nút cha [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

171]

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

266 [bộ chọn chủ đề] Đặt chủ đề của bộ chọn [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

173 để chọn các nút cha thay vì các nút con]

Tiểu bang

hoạt hình

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174. Khớp các yếu tố hiện đang được làm động

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  175. So khớp các phần tử hiện không hoạt ảnh

tuyển chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  176. Khớp các phần tử đã chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  177. So khớp các phần tử không được chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  178. Phù hợp với các yếu tố có thể lựa chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  179. So khớp các phần tử không thể chọn

khóa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  180. Phù hợp với các yếu tố bị khóa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  181. So khớp các phần tử không bị khóa

Phong cách

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  182. So khớp các phần tử có thể nhìn thấy [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  653 và

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  654]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  185. So khớp các phần tử bị ẩn [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  563 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  187]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  188. So khớp các phần tử trong suốt [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  189 cho bản thân hoặc cha mẹ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  190. So khớp một phần tử nếu hình nền của nó hiện đang tải

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  191. So khớp một phần tử nếu hình nền của nó hiện không tải; . e. không có hình ảnh hoặc hình ảnh đã được tải]

Tương tác người dùng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  192. Khớp các yếu tố đang được người dùng lấy

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  193. So khớp các yếu tố hiện không được người dùng nắm bắt

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  194. Khớp các yếu tố mà người dùng có thể lấy được

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  195. So khớp các phần tử mà người dùng không thể lấy được

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  196. So khớp các phần tử đang hoạt động [i. e. tương tác người dùng, tương tự như

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  196 trong CSS]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  198. So khớp các phần tử không hoạt động [i. e. không có tương tác người dùng]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  199. Khớp các phần tử khi được hiển thị trong môi trường dựa trên cảm ứng [e. g. trên máy tính bảng]

Trong hoặc ngoài đồ thị

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  700. So khớp các phần tử đã bị xóa khỏi biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  701. So khớp các phần tử có trong biểu đồ [chúng không bị xóa]

nút hợp chất

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  702. So khớp các nút cha [chúng có một hoặc nhiều nút con]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  703. So khớp các nút không có con [chúng không có nút con nào]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  704 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  705. So khớp các nút con [mỗi nút có nút cha]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  706. Khớp các nút mồ côi [mỗi nút không có cha mẹ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  707. So khớp các nút cha. Cũng khớp với các cạnh được kết nối với các nút cha [mỗi cạnh có ít nhất một nút cha giữa nguồn và đích]

các cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  708. So khớp các cạnh của vòng lặp [cùng nguồn với đích]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  709. So khớp các cạnh đơn giản [i. e. như trong một biểu đồ đơn giản, nguồn khác làm mục tiêu]

Phong cách trong Cytoscape. js tuân theo các quy ước CSS càng chặt chẽ càng tốt. Trong hầu hết các trường hợp, một thuộc tính có cùng tên và hành vi với tên CSS tương ứng của nó. Tuy nhiên, các thuộc tính trong CSS không đủ để chỉ định kiểu dáng của một số phần của biểu đồ. Trong trường hợp đó, các thuộc tính bổ sung được giới thiệu là duy nhất cho Cytoscape. js

Để đơn giản và dễ sử dụng, được bỏ qua hoàn toàn trong biểu định kiểu. Đối với một thuộc tính kiểu nhất định cho một phần tử nhất định, bộ chọn phù hợp cuối cùng sẽ thắng

Định dạng

Kiểu được chỉ định tại có thể ở định dạng hàm, ở định dạng JSON đơn giản hoặc ở định dạng chuỗi — định dạng JSON đơn giản và định dạng chuỗi sẽ hữu ích hơn nếu bạn muốn kéo xuống kiểu từ máy chủ

định dạng chuỗi

Lưu ý rằng các dấu chấm phẩy ở cuối cho mỗi thuộc tính, ngoại trừ thuộc tính cuối cùng, là bắt buộc. Phân tích cú pháp chắc chắn sẽ thất bại nếu không có chúng

Một tệp kiểu ví dụ

Khi khởi tạo

Định dạng JSON đơn giản

định dạng chức năng

Bạn có thể thay thế sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

710 thay cho

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

209, e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

712 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

713

giá trị chức năng

Trong định dạng JSON hoặc biểu định kiểu hàm, có thể chỉ định một hàm làm giá trị cho thuộc tính kiểu. Theo cách này, giá trị kiểu dáng có thể được chỉ định thông qua một hàm trên cơ sở từng phần tử

Thí dụ

loại tài sản

• Màu sắc có thể được chỉ định theo tên [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  714], hex [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  715 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  716], RGB [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  717], hoặc HSL [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  718]
• Các giá trị yêu cầu một số, chẳng hạn như độ dài, có thể được chỉ định trong các giá trị pixel [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  719], các giá trị không có đơn vị hoàn toàn bằng pixel [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  720] hoặc giá trị em [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  721]. Kích thước được chỉ định trong , vì vậy kích thước trên màn hình [được hiển thị] như được chỉ định ở mức thu phóng 1
• Các giá trị độ mờ được chỉ định dưới dạng các số nằm trên

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  722 [e. g

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  723]
• Thời gian được đo bằng đơn vị ms hoặc s [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  724]
• Các góc được đo bằng radian [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  725] hoặc độ [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  726], theo chiều kim đồng hồ
• Các thuộc tính chỉ định danh sách các giá trị có thể được định dạng theo một trong các định dạng sau
  • Một chuỗi được phân tách bằng dấu cách [e. g.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    727]
    • Lưu ý rằng đối với danh sách màu sắc, điều này có nghĩa là bạn không thể sử dụng khoảng trắng trong

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      728 hoặc

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      729
    • Đây là định dạng duy nhất có thể có trong biểu định kiểu chuỗi [thường là tệp bên ngoài]
  • Một mảng JS [e. g.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    730]
    • Định dạng này có thể được sử dụng trong biểu định kiểu hàm chuỗi và trong biểu định kiểu JSON

Người lập bản đồ

Ngoài việc chỉ định hoàn toàn giá trị của thuộc tính, nhà phát triển cũng có thể sử dụng trình ánh xạ để chỉ định động giá trị thuộc tính

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  731 chỉ định ánh xạ trực tiếp tới trường dữ liệu của phần tử. Ví dụ:

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  732 sẽ ánh xạ một thuộc tính tới giá trị trong trường

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  733 của một phần tử trong dữ liệu của nó [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  734]. Điều này hữu ích để ánh xạ tới các thuộc tính như văn bản nhãn [thuộc tính

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  549]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  736 chỉ định ánh xạ tuyến tính tới trường dữ liệu của phần tử. Ví dụ:

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  737 ánh xạ trọng số của một phần tử thành các màu giữa xanh lam và đỏ cho các trọng số từ 0 đến 100. Ví dụ, một phần tử có

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  738 sẽ được ánh xạ sang màu xanh lam. Các phần tử có giá trị nằm ngoài phạm vi đã chỉ định được ánh xạ tới các giá trị cực trị. Trong ví dụ trước, một phần tử có

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  739 sẽ được ánh xạ sang màu xanh lam

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  740 Một hàm có thể được truyền dưới dạng giá trị của thuộc tính kiểu. Hàm có một đối số

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  64 chỉ định phần tử mà giá trị thuộc tính kiểu đang được tính toán
  • Chỉ định một giá trị hợp lệ cho thuộc tính kiểu tương ứng cho tất cả các thành phần mà khối bộ chọn tương ứng của nó áp dụng
  • Sử dụng các hàm thuần túy chỉ phụ thuộc vào

    • #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      81,

    • #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      401, hoặc
    • trạng thái cơ bản có thể được biểu diễn thay thế bằng các bộ chọn [e. g.

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      744 vẫn ổn vì có bộ chọn

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      176]
  • Không thay đổi trạng thái biểu đồ cho

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    62 hoặc cho bất kỳ

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    64 nào bên trong chức năng ánh xạ của bạn
  • Không tạo các phụ thuộc theo chu kỳ [i. e. một thuộc tính kiểu đọc giá trị của thuộc tính kiểu khác]. Chức năng phong cách của bạn không nên gọi các chức năng như

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    274 hoặc

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    275
  • Không sử dụng các hàm nếu bạn có thể sử dụng các trình ánh xạ và bộ chọn tích hợp để thể hiện điều tương tự. Nếu bạn sử dụng một chức năng, bạn sẽ mất các cải tiến về hiệu suất kiểu tích hợp sẵn và bạn sẽ phải tự tối ưu hóa và lưu trữ chức năng đó

Thân nút

Hình dạng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  637. Chiều rộng thân nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  751. Chiều cao thân nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  752. Hình dạng thân nút. Lưu ý rằng mỗi hình dạng phù hợp với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  637 và

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  751 đã chỉ định, vì vậy bạn có thể phải điều chỉnh

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  637 và

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  751 nếu bạn muốn có hình dạng đều [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  757 cho một số hình dạng đều]. Chỉ các hình dạng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  758 được hỗ trợ bởi các hợp chất, bởi vì kích thước của một hợp chất được xác định bởi hộp giới hạn của các phần tử con. Các giá trị sau được chấp nhận

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    759

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    760

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    761

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    762

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    763

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    764

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    765

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    766

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    767

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    768

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    769

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    770

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    771

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    772

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    773

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    774

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    775

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    776

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    777

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    778

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    779

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    780

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    781

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    782
  • ________ 5783 [đa giác tùy chỉnh được chỉ định qua ________ 5784]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  784. Một mảng [hoặc một chuỗi được phân tách bằng dấu cách] gồm các số trong khoảng [-1, 1], biểu thị các giá trị x và y xen kẽ [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  786]. Điều này đại diện cho các điểm trong đa giác cho hình dạng của nút. Hộp giới hạn của nút được cho bởi [-1, -1], [1, -1], [1, 1], [-1, 1]. Vị trí của nút là gốc tọa độ [0, 0]

Tiểu sử

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  641. Màu của thân nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  788. Bôi đen phần thân của nút cho các giá trị từ 0 đến 1;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  789. Mức độ mờ của màu nền của nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  790. Kiểu điền của phần thân của nút;

Dốc

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  794. Màu sắc của gradient nền dừng lại [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  795]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  796. Vị trí của các điểm dừng gradient nền [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  797]. Nếu không được chỉ định hoặc không hợp lệ, các điểm dừng sẽ chia đều

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  798. Đối với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  799, thuộc tính này xác định hướng của độ dốc nền. Các giá trị sau được chấp nhận

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    100 [mặc định]

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    101

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    102

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    103

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    104

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    105

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    106

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    107

Biên giới

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  108. Kích thước đường viền của nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  109. Kiểu đường viền của nút;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  114. Màu của đường viền của nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  115. Độ mờ của đường viền của nút

đệm

Phần đệm xác định phần bổ sung cho kích thước của nút. Ví dụ,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

116 thêm vào bên ngoài của một nút [i. e. tổng] chiều rộng và chiều cao. Điều này có thể được sử dụng để thêm khoảng cách giữa nút cha và nút con của nó

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  116. Lượng đệm xung quanh tất cả các mặt của nút. Có thể chỉ định giá trị phần trăm hoặc pixel. Ví dụ: cả

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118 và

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  119 đều là giá trị được chấp nhận. Theo mặc định, phần trăm đệm được tính bằng phần trăm chiều rộng của nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  120. Xác định cách tính phần đệm khi và chỉ khi đơn vị phần trăm được sử dụng. Chấp nhận một trong các từ khóa được chỉ định bên dưới

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    637. tính toán phần đệm theo tỷ lệ phần trăm chiều rộng nút

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    751. tính phần đệm theo tỷ lệ phần trăm của chiều cao nút

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    123. tính phần đệm theo tỷ lệ phần trăm trung bình của chiều rộng và chiều cao của nút

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    124. tính toán phần đệm theo tỷ lệ phần trăm tối thiểu của chiều rộng và chiều cao của nút

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    125. tính toán phần đệm theo tỷ lệ phần trăm của chiều rộng và chiều cao tối đa của nút

Hợp chất gốc kích thước

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  126. Có bao gồm các nhãn của hậu duệ trong việc định cỡ một nút phức hợp hay không;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  129. Chỉ định chiều rộng tối thiểu [bên trong] của thân nút cho nút cha tổng hợp [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  130]. Nếu độ lệch cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  129 cộng lại không bằng 100%, thì độ lệch được chuẩn hóa thành tổng số 100%

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  132. Khi một nút ghép được mở rộng bởi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  129 của nó, giá trị này chỉ định phần trăm chiều rộng bổ sung được đặt ở phía bên trái của nút [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  135. Khi một nút ghép được mở rộng bằng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  129 của nó, giá trị này chỉ định phần trăm chiều rộng bổ sung được đặt ở phía bên phải của nút [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  138. Chỉ định chiều cao tối thiểu [bên trong] của phần thân nút cho nút cha tổng hợp [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  130]. Nếu độ lệch cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  138 không cộng lại bằng 100%, thì độ lệch được chuẩn hóa thành tổng số 100%

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  141. Khi một nút ghép được phóng to bởi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  138 của nó, giá trị này chỉ định phần trăm chiều rộng bổ sung được đặt ở phía trên cùng của nút [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  144. Khi một nút ghép được mở rộng bằng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  138 của nó, giá trị này chỉ định phần trăm chiều rộng bổ sung được đặt ở phía dưới cùng của nút [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118]

Hình nền

Một hình nền có thể được áp dụng cho phần thân của nút. Các thuộc tính sau hỗ trợ nhiều giá trị [được phân tách bằng dấu cách hoặc mảng] với các chỉ số được liên kết

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  147. URL trỏ đến hình ảnh sẽ được sử dụng làm nền của nút. PNG, JPG và SVG là các định dạng được hỗ trợ
  • Bạn có thể sử dụng URI dữ liệu để sử dụng hình ảnh được nhúng, do đó lưu yêu cầu HTTP
  • Bạn có thể chỉ định nhiều ảnh nền bằng cách tách từng ảnh bằng dấu cách [định dạng được phân cách bằng dấu cách], nhưng nếu sử dụng biểu định kiểu không phải chuỗi thì nên sử dụng mảng
    • Các hình ảnh sẽ được áp dụng cho phần thân của nút theo thứ tự nhất định, xếp chồng lên nhau
    • Khi chỉ định thuộc tính cho nhiều hình ảnh, nếu thuộc tính cho một hình ảnh cụ thể không được cung cấp thì giá trị mặc định sẽ được sử dụng làm dự phòng
  • Để đặt một hình ảnh bên ngoài các giới hạn của phần thân nút, cần chỉ định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    148 và

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    149 cho các hình ảnh vượt ra ngoài hộp giới hạn của nút đó là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    150 pixel. Lưu ý rằng các giá trị của

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    150 phải tương đối nhỏ đối với hiệu suất
  • Để kiểm soát thứ tự vẽ của ảnh nền [e. g phủ ảnh nền lên đường viền], cần chỉ định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    152 [mặc định là

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    153]
  • Cân nhắc hình ảnh SVG
    • Luôn bao gồm tiêu đề XML này trong mỗi hình ảnh SVG

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    7____047
    • Không sử dụng mã hóa cơ sở 64 cho SVG trong URI dữ liệu
    • Phông chữ web [e. g. WOFF, WOFF2] có thể không hoạt động trong các phần tử SVG

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      86 trong một số trình duyệt. Để có khả năng tương thích giữa nhiều trình duyệt tốt nhất, hãy sử dụng các phiên bản SVG gốc của các biểu tượng của bạn — thường được định nghĩa là các phần tử

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      86
    • Nếu bạn ghi nhớ các trình ánh xạ hàm để tạo SVG theo thủ tục, bạn có thể muốn hàm của mình trả về một đối tượng như

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      156. Điều này cho phép bạn sử dụng kích thước của hình ảnh cho các thuộc tính kiểu khác, như chiều rộng và chiều cao của nút. e. g
    • Sử dụng thuộc tính

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      157 trong hình ảnh SVG có thể gây ra sự cố kết xuất trong Firefox
    • Hình ảnh SVG có thể không hoạt động nhất quán trong Internet Explorer
    • Gói

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      158 đóng vai trò là một ví dụ điển hình cho việc sử dụng hình ảnh SVG trong biểu định kiểu. Biểu định kiểu đó tạo trang trí trên các nút phù hợp với tiêu chuẩn SBGN

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  159. Tất cả các hình ảnh được tải với một thuộc tính có thể là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  161 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  162. Mặc định được đặt thành

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  161

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  164. Độ mờ của hình nền

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  165. Xác định xem hình nền có được làm mịn [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  166, mặc định] hay không [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  167]. Đây chỉ là một gợi ý và trình duyệt có thể tôn trọng hoặc không tôn trọng giá trị được đặt cho thuộc tính này

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  168. Xác định xem hình nền nằm trong [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  153, mặc định] hay phía trên nút [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  170]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  171. Chỉ định chiều rộng của hình ảnh. Một giá trị phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118] có thể được sử dụng để đặt chiều rộng hình ảnh so với chiều rộng nút. Nếu được sử dụng kết hợp với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  173, thì giá trị này sẽ ghi đè chiều rộng của hình ảnh khi tính toán độ khớp — do đó ghi đè tỷ lệ khung hình. Giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174 được sử dụng theo mặc định, sử dụng chiều rộng của hình ảnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  175. Chỉ định chiều cao của hình ảnh. Một giá trị phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118] có thể được sử dụng để đặt chiều cao hình ảnh so với chiều cao nút. Nếu được sử dụng kết hợp với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  173, thì giá trị này sẽ ghi đè chiều cao của hình ảnh khi tính toán độ khớp — do đó ghi đè tỷ lệ khung hình. Giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174 được sử dụng theo mặc định, sử dụng chiều cao của hình ảnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  173. Làm thế nào hình nền phù hợp với nút;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  183. Có lặp lại hình nền hay không;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  644. Vị trí x của hình nền, được đo bằng phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118] hoặc pixel [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  190]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  191. Vị trí y của hình nền, được đo bằng phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118] hoặc pixel [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  190]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  194. Độ lệch x của hình nền, được đo bằng phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118] hoặc pixel [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  190]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  197. Độ lệch y của hình nền, được đo bằng phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118] hoặc pixel [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  190]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  000. Thay đổi xem chiều rộng được tính tương ứng với chiều rộng của nút hay chiều rộng ngoài phần đệm; . Nếu không được chỉ định,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  002 được sử dụng theo mặc định

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  004. Thay đổi xem chiều cao được tính tương ứng với chiều cao của nút hay chiều cao ngoài phần đệm; . Nếu không được chỉ định,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  002 được sử dụng theo mặc định

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  008. Cách xử lý việc cắt ảnh nền;

Các thuộc tính sau áp dụng cho tất cả các hình ảnh của một nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  011. Chỉ định kích thước đệm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  012] mở rộng hộp giới hạn của nút theo mọi hướng. Điều này cho phép các hình ảnh được vẽ bên ngoài hộp giới hạn thông thường của nút khi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  008 là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  180. Điều này hữu ích cho các đồ trang trí nhỏ ngay bên ngoài nút. ________ 0015 chấp nhận 1 giá trị [cho tất cả các hướng], 2 giá trị, [_________ 0016] hoặc 4 giá trị [________ 0017]

Sau đây là một ví dụ về cách tạo kiểu ảnh nền hợp lệ bằng JSON. Các hình ảnh ví dụ được lấy từ Wikimedia Commons với giấy phép Creative Commons

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

48

Đường biên

Các thuộc tính này ảnh hưởng đến kiểu dáng của một đường cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  637. Chiều rộng của một đường cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  019. Phương pháp uốn cong được sử dụng để tách hai hoặc nhiều cạnh giữa hai nút [demo]; . Lưu ý rằng các cạnh của

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  020 hoạt động tốt nhất với các nút của

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  759,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  762 hoặc tương tự. Hình dạng nút nhỏ hơn, như

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  760, sẽ không đẹp mắt về mặt thẩm mỹ. Cũng lưu ý rằng mũi tên điểm cuối cạnh không được hỗ trợ cho các cạnh

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  020

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  032. Màu của đường viền

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  033. Phong cách của đường viền;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  037. Kiểu nắp của đường viền; . Nắp có thể hiển thị hoặc không, tùy thuộc vào hình dạng của nút và kích thước tương đối của nút và cạnh. Các mũ khác với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  038 mở rộng ra ngoài điểm cuối được chỉ định của cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  042. Độ mờ của đường và mũi tên của cạnh. Hữu ích nếu bạn muốn có độ mờ riêng biệt cho nhãn cạnh so với đường viền. Lưu ý rằng giá trị độ mờ của phần tử cạnh ảnh hưởng đến độ mờ hiệu quả của các thành phần con dòng và nhãn của nó

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  043. Kiểu tô của đường viền;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  047. Mẫu đường

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  112 chỉ định độ dài xen kẽ của các đường và khoảng trống. [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  049]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  050. Độ lệch dòng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  112 [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  720]. Nó rất hữu ích để tạo hoạt ảnh cạnh

Dốc

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  053. Màu sắc của các điểm dừng gradient [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  795]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  055. Vị trí của các điểm dừng gradient [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  797]. Nếu không được chỉ định [hoặc không hợp lệ], các điểm dừng sẽ chia đều

cạnh Bezier

Đối với các cạnh bezier tự động, đi kèm [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

612, demo]

Một cạnh bezier được gộp với tất cả các cạnh bezier song song khác. Mỗi cạnh bezier là một , được tách biệt với các cạnh khác bằng cách thay đổi độ cong. Nếu có một số lẻ các cạnh song song trong một bó thì cạnh ở giữa được vẽ thành một đường thẳng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  058. Dọc theo đường vuông góc từ nguồn đến đích, giá trị này chỉ định khoảng cách giữa các cạnh bezier liên tiếp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  059. Một giá trị ghi đè

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  058 bằng một giá trị thủ công. Bởi vì nó ghi đè kích thước bước, các cạnh bezier có cùng giá trị sẽ chồng lên nhau. Do đó, tốt nhất là sử dụng giá trị này làm giá trị một lần cho các cạnh cụ thể nếu cần.

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  061. Một giá trị duy nhất có trọng số đối với các điểm kiểm soát dọc theo đường từ nguồn đến đích. Giá trị thường nằm trong khoảng [0, 1], với 0 đối với nút nguồn và 1 đối với nút đích — nhưng cũng có thể sử dụng các giá trị lớn hơn hoặc nhỏ hơn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  643. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 [mặc định], đường từ nguồn đến đích cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  061 là từ bên ngoài hình dạng của nút nguồn đến bên ngoài hình dạng của nút đích. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065, dòng từ vị trí nguồn đến vị trí đích. Tùy chọn

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065 giúp việc tính toán các điểm cạnh dễ dàng hơn — nhưng tùy chọn này nên được sử dụng cẩn thận vì bạn có thể tạo các điểm không hợp lệ mà

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 sẽ tự động sửa

cạnh vòng

Đối với các vòng lặp [i. e. cùng một nguồn và đích, demo]

Một vòng lặp thường được vẽ dưới dạng một cặp, một bezier đi ra khỏi nút và bezier thứ hai quay trở lại nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  068. Xác định góc mà các vòng mở rộng từ nút trong trường hợp nút nguồn và nút đích của một cạnh giống nhau. Góc được chỉ định từ vị trí 12 giờ và nó tăng dần theo chiều kim đồng hồ để tăng các giá trị dương. Giá trị mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  069 [kéo dài về phía trên bên trái]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  070. Xác định góc giữa các cạnh rời và trở về trong các vòng lặp. Giá trị dương dẫn đến vòng lặp theo chiều kim đồng hồ và giá trị âm dẫn đến vòng lặp ngược chiều kim đồng hồ. Mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  071

Lưu ý rằng các vòng lặp chỉ có thể là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

023 hoặc

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

024 cho

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

019 của chúng

Các cạnh bezier chưa được nhóm

Đối với các cạnh bezier có các điểm điều khiển thủ công [______4614, demo]

Một cạnh bezier không được nhóm được tạo thành từ một loạt một hoặc nhiều — một điểm kiểm soát trên mỗi đường cong. Các điểm kiểm soát của các đường cong bezier chưa được nhóm được chỉ định thủ công, sử dụng hệ thống tọa độ tương ứng với nút nguồn và nút đích. Điều này duy trì hình dạng đường cong tổng thể bất kể vị trí của các nút được kết nối

Một đường cong bezier bậc hai được xác định bởi ba điểm. Những điểm đó bao gồm điểm đầu [P0], điểm điều khiển trung tâm [P1] và điểm cuối [P2]. Theo truyền thống, cả ba điểm đều được gọi là “điểm kiểm soát”, nhưng chỉ điểm kiểm soát trung tâm [P1] được gọi là “điểm kiểm soát” trong tài liệu này để đảm bảo tính ngắn gọn và rõ ràng

Điểm bắt đầu [P0] cho đường cong bezier bậc hai đầu tiên trong chuỗi được chỉ định bởi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

076. Điểm cuối [P2] cho đường cong bezier bậc hai cuối cùng trong chuỗi được chỉ định bởi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

077

Khi hai hoặc nhiều điểm kiểm soát được chỉ định cho một cạnh bezier chưa được nhóm, mỗi cặp đường cong bezier liền kề được nối tại điểm giữa của hai điểm kiểm soát. Nói cách khác, điểm bắt đầu [P0] và điểm kết thúc [P2] cho đường cong bezier bậc hai ở giữa chuỗi được đặt hoàn toàn. Điều này làm cho hầu hết các đường cong tham gia trơn tru

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  615. Một loạt các giá trị chỉ định cho mỗi điểm kiểm soát khoảng cách vuông góc với một đường được tạo từ nguồn đến đích, e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  079

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  616. Một loạt các giá trị có trọng số đối với các điểm kiểm soát dọc theo một đường từ nguồn đến đích, e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  081. Một giá trị thường nằm trong khoảng [0, 1], với 0 đối với nút nguồn và 1 đối với nút đích — nhưng cũng có thể sử dụng các giá trị lớn hơn hoặc nhỏ hơn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  643. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 [mặc định], đường từ nguồn đến đích cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  616 là từ bên ngoài hình dạng của nút nguồn đến bên ngoài hình dạng của nút đích. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065, dòng từ vị trí nguồn đến vị trí đích. Tùy chọn

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065 giúp việc tính toán các điểm cạnh dễ dàng hơn — nhưng tùy chọn này nên được sử dụng cẩn thận vì bạn có thể tạo các điểm không hợp lệ mà

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 sẽ tự động sửa

Cạnh đống cỏ khô

Đối với các cạnh đường thẳng, nhanh [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

088, demo]

Các cạnh của đống cỏ khô là sự thay thế hiệu quả hơn cho các cạnh thẳng, trơn. Cạnh đống cỏ khô được vẽ dưới dạng một đường thẳng từ nút nguồn đến nút đích, được đặt ngẫu nhiên dọc theo một số góc từ tâm của mỗi nút. Theo cách này, nhiều cạnh đống cỏ khô song song tạo thành một bó chặt chẽ, đặc biệt khi nửa trong suốt. Điều này làm cho các cạnh của đống cỏ khô trở thành một cách hiệu quả để trực quan hóa các biểu đồ có số lượng lớn các cạnh song song

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  089. Một giá trị bao gồm từ 0 đến 1 cho biết bán kính tương đối được sử dụng để định vị các cạnh của đống cỏ khô trên các nút được kết nối của chúng. Bên ngoài của nút là 1 và trung tâm của nút là 0. Đối với các đồ thị đơn giản, bán kính bằng 0 có ý nghĩa

phân đoạn cạnh

Đối với các cạnh được tạo bởi một số đường thẳng [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

618, demo]

Cạnh của đoạn được tạo thành từ một loạt một hoặc nhiều đường thẳng, sử dụng hệ tọa độ tương ứng với nút nguồn và nút đích. Điều này duy trì mô hình đường tổng thể bất kể hướng vị trí của các nút nguồn và đích

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  091. Một loạt các giá trị chỉ định cho mỗi điểm phân đoạn khoảng cách vuông góc với một đường được tạo từ nguồn đến đích, ví dụ:. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  079

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  093. Một loạt các giá trị có trọng số điểm phân khúc dọc theo một đường từ nguồn đến đích, e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  081. Một giá trị thường nằm trong khoảng [0, 1], với 0 đối với nút nguồn và 1 đối với nút đích — nhưng cũng có thể sử dụng các giá trị lớn hơn hoặc nhỏ hơn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  643. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 [mặc định], đường từ nguồn đến đích cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  093 là từ bên ngoài hình dạng của nút nguồn đến bên ngoài hình dạng của nút đích. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065, dòng từ vị trí nguồn đến vị trí đích. Tùy chọn

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065 giúp việc tính toán các điểm cạnh dễ dàng hơn — nhưng tùy chọn này nên được sử dụng cẩn thận vì bạn có thể tạo các điểm không hợp lệ mà

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 sẽ tự động sửa

Cạnh thẳng

Đối với các cạnh đường thẳng [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

101, demo]

Một cạnh thẳng [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

101] được vẽ dưới dạng một đường thẳng duy nhất từ ​​bên ngoài hình dạng nút nguồn đến bên ngoài hình dạng nút đích. Mũi tên điểm cuối và điểm giữa được hỗ trợ trên các cạnh thẳng. Các cạnh thẳng thường không phù hợp với đa đồ thị

Các cạnh tam giác thẳng

Cho các cạnh tam giác thẳng [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

103, demo]

Một cạnh tam giác thẳng [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

103] được vẽ dưới dạng một tam giác cân thẳng duy nhất theo hướng từ nguồn đến mục tiêu, với đáy tam giác tại nguồn và đỉnh tam giác [một điểm] tại mục tiêu

Thuộc tính

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

637 xác định chiều rộng của đáy tam giác. Các thuộc tính

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

033,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

037,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

047,

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

050 không được hỗ trợ

cạnh taxi

Đối với các cạnh có phân cấp, được đóng gói [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

110, demo]

Một cạnh taxi [

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

110] được vẽ dưới dạng một loạt các đường vuông góc [i. e. trong hình học taxi]. Cạnh có hướng chính dọc theo trục x hoặc trục y, có thể được sử dụng để nhóm các cạnh theo thứ bậc. Nghĩa là, các cạnh taxi phù hợp với cây và DAG được sắp xếp theo cách phân cấp

Một lề đường taxi có nhiều nhất hai lượt có thể nhìn thấy. Bắt đầu từ nút nguồn, cạnh đi theo hướng chính trong khoảng cách đã chỉ định. Sau đó, cạnh quay, đi về phía mục tiêu dọc theo trục phụ. Lượt đầu tiên có thể được chỉ định để bó các cạnh của các nút đi. Lượt thứ 2 ngầm định, dựa vào lượt thứ nhất đi hết quãng đường còn lại theo trục chính

Khi không thể vẽ được mép lăn dọc theo sơ đồ rẽ thông thường — tôi. e. một hoặc nhiều lượt quá gần nguồn hoặc đích — nó được định tuyến lại. Việc định tuyến lại được thực hiện trên cơ sở nỗ lực tối đa. Định tuyến lại ưu tiên hướng đã chỉ định để đi theo nhóm trên khoảng cách rẽ đã chỉ định. Ví dụ, một cạnh

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

112 sẽ tránh đi theo hướng đi lên nếu có thể. Trong thực tế, việc định tuyến lại không nên diễn ra đối với các biểu đồ được bố trí hợp lý

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  113. Hướng chính của cạnh, hướng xuất phát từ nút nguồn;

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    174. Tự động sử dụng

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    115 hoặc

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    116, dựa trên khoảng cách dọc hoặc ngang lớn nhất

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    115. Tự động sử dụng

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    112 hoặc

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    119, dựa trên hướng thẳng đứng từ nguồn đến đích

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    112. Bó người ngoài cuộc xuống dưới

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    119. Bó người ngoài cuộc trở lên

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    116. Tự động sử dụng

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    123 hoặc

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    124, dựa trên hướng ngang từ nguồn đến đích

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    125. Bó người đi thẳng

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    124. Bó người ngoài cuộc sang trái

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  127. Khoảng cách dọc theo trục sơ cấp nơi áp dụng lượt đầu tiên
  • Giá trị này có thể là một khoảng cách tuyệt đối [e. g.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    012] hoặc có thể là khoảng cách tương đối giữa nguồn và đích [e. g.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    118]
  • Một giá trị âm có thể được chỉ định để biểu thị khoảng cách theo hướng ngược lại, mục tiêu tới nguồn [e. g.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    130]
  • Lưu ý rằng tính năng bó có thể không hoạt động với hướng rõ ràng [

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    119,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    112,

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    124 hoặc

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    125] song song với khoảng cách rẽ được chỉ định theo đơn vị phần trăm

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  135. Khoảng cách tối thiểu dọc theo trục chính được duy trì giữa các nút và các ngã rẽ
  • Giá trị này chỉ nhận giá trị tuyệt đối [e. g.

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    136]
  • Thuộc tính này làm cho đường lăn được định tuyến lại khi các ngã rẽ quá gần với nguồn hoặc đích. Như vậy, nó cũng giúp tránh các mũi tên điểm cuối cạnh chồng lên nhau

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  643. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 [mặc định], khoảng cách [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  127 và

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  135] được xem xét từ bên ngoài giới hạn của nguồn đến bên ngoài giới hạn của mục tiêu. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065, khoảng cách được xem xét từ vị trí nguồn đến vị trí đích. Tùy chọn

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  065 giúp việc tính toán các điểm cạnh dễ dàng hơn — nhưng tùy chọn này nên được sử dụng cẩn thận vì bạn có thể tạo các điểm không hợp lệ mà

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  063 sẽ tự động sửa

mũi tên cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  144. Màu của mũi tên nguồn của cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  145. Hình dạng mũi tên nguồn của cạnh [demo];

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    760

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    147

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    148

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    149

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    150

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    782

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    152

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    040

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    154

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    768

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    156

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    180

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  158. Trạng thái lấp đầy của mũi tên nguồn của cạnh;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  161. Chia tỷ lệ cho kích thước mũi tên;

Đối với mỗi thuộc tính mũi tên cạnh ở trên, hãy thay thế

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

86 bằng một trong

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  78. Chỉ về phía nút nguồn, ở cuối cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  164. Chỉ về phía nút nguồn, ở giữa cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  79. Chỉ về phía nút đích, ở cuối cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  166. Chỉ về phía nút đích, ở giữa cạnh

Chỉ các mũi tên ở giữa được hỗ trợ trên các cạnh của đống cỏ khô

điểm cuối cạnh

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

076 &

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

077. Chỉ định điểm cuối của phía nguồn của cạnh và phía đích của cạnh, tương ứng. Có một số tùy chọn về cách đặt các thuộc tính đó

• Một giá trị đặc biệt, được đặt tên có thể được sử dụng

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    169 [mặc định] chỉ ra rằng cạnh phải được đặt tự động hướng về vị trí của nút và được đặt ở bên ngoài hình dạng của nút

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    170 sử dụng các quy tắc tương tự như

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    169 với quy tắc được thêm vào là nếu nhãn của nút sẽ cắt cạnh trước phần thân của nút, thì cạnh đó sẽ trỏ đến giao điểm đó. Điều này tránh sự chồng chéo của các cạnh với nhãn nút

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    172 cho biết cạnh phải đi hết vào bên trong nút và trỏ trực tiếp vào vị trí của nút. Điều này giống như chỉ định

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    173

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    174 cho biết điểm cuối cạnh phải được đặt bên ngoài hình dạng của nút nơi nó sẽ cắt đường tưởng tượng từ vị trí nguồn đến vị trí đích. Giá trị này hữu ích để tự động tránh các trường hợp không hợp lệ đối với các cạnh nhỏ hơn, đặc biệt là với các nút ghép

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    175 sử dụng các quy tắc tương tự như

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    174 với quy tắc được thêm vào là nếu nhãn của nút cắt đường tưởng tượng trước thân nút, thì cạnh sẽ trỏ đến giao điểm đó. Điều này tránh sự chồng chéo của các cạnh với nhãn nút
• Hai số có thể chỉ định điểm cuối. Các con số chỉ ra một vị trí liên quan đến vị trí của nút. Các số có thể được chỉ định dưới dạng giá trị phần trăm [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  118, tương ứng với chiều rộng và chiều cao của nút] hoặc theo khoảng cách tuyệt đối [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  178 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  721]
• Một giá trị góc đơn [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  180 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  181] có thể chỉ định rằng điểm cuối phải được đặt trên đường viền của nút ở góc đã chỉ định. Góc bắt đầu lúc 12 giờ và tăng dần theo chiều kim đồng hồ

Điểm cuối cho các cạnh có thể được dịch chuyển ra khỏi nút nguồn và nút đích

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  182. Một giá trị dịch chuyển cạnh ra khỏi nút nguồn [mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  183]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  184. Một giá trị dịch chuyển cạnh ra khỏi nút đích [mặc định là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  183]

Sửa đổi điểm cuối không được hỗ trợ cho các cạnh

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

088 vì lý do hiệu suất

Hiển thị

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  187. Có hiển thị phần tử hay không;
  • Phần tử

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    563 không chiếm dung lượng
    • Một cạnh bezier đi kèm của

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      563 không chiếm dung lượng trong gói của nó
    • Nút

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      563 ẩn các cạnh được kết nối của nó
    • Nút

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      563 được coi là một điểm chứ không phải là một khu vực trong bố cục, ảnh hưởng đến những thứ như tránh chồng chéo
    • Phần tử

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      563 không được xem xét để khớp chế độ xem
  • Phần tử

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    563 không tương tác

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  196. Phần tử có hiển thị hay không;
  • Phần tử

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    187 chiếm dung lượng
    • Một cạnh bezier đi kèm của

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      187 chiếm không gian trong gói của nó
    • Nút

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      187 không ẩn các cạnh được kết nối của nó
    • Phần tử

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      187 được bố cục xem xét bình thường
    • Phần tử

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      187 được xem xét để phù hợp với chế độ xem
  • Phần tử

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    187 không tương tác

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  640. Độ mờ của phần tử, nằm trong khoảng từ 0 đến 1. Lưu ý rằng độ mờ của nút cha mẹ ảnh hưởng đến độ mờ hiệu quả của các nút con của nó
  • Phần tử

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    189 chiếm dung lượng
    • Một cạnh bezier đi kèm

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      189 chiếm không gian trong gói của nó
    • Nút

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      189 không ẩn các cạnh được kết nối của nó
    • Một phần tử

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      189 được bố cục xem xét bình thường
    • Một yếu tố

      #cy {
        width: 300px;
        height: 300px;
        display: block;
      }
      

      189 được xem xét để phù hợp với chế độ xem
  • Phần tử

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    189 có tính tương tác

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  212. Một giá trị số nguyên ảnh hưởng đến thứ tự vẽ tương đối của các phần tử. Nói chung, phần tử có ________ 0212 cao hơn sẽ được vẽ trên phần tử có ________ 0212 thấp hơn. Lưu ý rằng các cạnh nằm dưới các nút mặc dù có

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  212, trừ khi cần thiết cho các nút phức hợp

Các phần tử được vẽ theo thứ tự cụ thể dựa trên độ sâu phức hợp [thấp đến cao], loại phần tử [thường là các nút phía trên các cạnh] và chỉ số z [thấp đến cao]. Những phong cách này ảnh hưởng đến thứ tự

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  216. Có thể là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  217,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  218,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174 [mặc định] hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  220. Hình đầu tiên được vẽ là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  217, hình thứ hai là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  218, có cùng độ sâu với gốc của đồ thị ghép, tiếp theo là mặc định của

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174 vẽ theo thứ tự độ sâu từ gốc đến lá của đồ thị ghép. Lần rút cuối cùng là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  220. Thường không hợp lý khi đặt giá trị này cho các biểu đồ không hợp chất

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  225. Có thể là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174 [mặc định] hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  227. Cài đặt ________ 6174 vẽ các cạnh và nút, trong khi đó, ________ 0227 bỏ qua quy ước này và chỉ vẽ dựa trên giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  212

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  212. Một giá trị số nguyên ảnh hưởng đến thứ tự vẽ tương đối của các phần tử. Nói chung, phần tử có ________ 0212 cao hơn sẽ được vẽ trên phần tử có ________ 0212 thấp hơn trong cùng độ sâu

nhãn

Nhãn văn bản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  549. Văn bản hiển thị cho nhãn của phần tử [bản trình diễn]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  551. Văn bản hiển thị cho nhãn nguồn của một cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  553. Văn bản hiển thị cho nhãn đích của một cạnh

Kiểu phông chữ cơ bản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  237. Màu của nhãn phần tử

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  238. Độ mờ của văn bản nhãn, bao gồm cả đường viền của nó

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  239. Danh sách tên phông chữ được phân tách bằng dấu phẩy để sử dụng trên văn bản nhãn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  240. Kích thước của văn bản nhãn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  241. Kiểu phông chữ CSS sẽ được áp dụng cho văn bản nhãn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  242. Trọng lượng phông chữ CSS sẽ được áp dụng cho văn bản nhãn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  243. Một chuyển đổi để áp dụng cho văn bản nhãn;

gói văn bản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  247. Kiểu gói để áp dụng cho văn bản nhãn; .

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  249],

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  250 để ngắt thủ công và/hoặc tự động ngắt hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  251 để cắt bớt chuỗi và nối thêm '…' dựa trên

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  252. Lưu ý rằng với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  250, văn bản sẽ luôn ngắt dòng trên dòng mới [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  249] và văn bản có thể ngắt dòng trên bất kỳ ký tự khoảng trắng có thể ngắt nào — kể cả khoảng trắng có độ rộng bằng 0 [

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  255]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  252. Chiều rộng tối đa cho văn bản được bao bọc, được áp dụng khi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  247 được đặt thành

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  250 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  251. Chỉ dành cho các dòng mới thủ công [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  249], hãy đặt một giá trị rất lớn như

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  261 sao cho chỉ các ký tự dòng mới của bạn mới được áp dụng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  262. Các ký tự có thể được sử dụng cho các vị trí ngắt dòng có thể xảy ra khi một dòng bị tràn

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  252; . Lưu ý rằng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  265 phù hợp với CJK, trong đó các ký tự nằm trong lưới và không tồn tại khoảng trắng. Ví dụ: sử dụng

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  265 với văn bản trong bảng chữ cái Latinh, sẽ phân tách các từ ở các vị trí tùy ý

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  268**. Sự biện minh của nhãn nhiều dòng [được bọc]; . Giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  174 làm cho nhãn của nút được căn đều dọc theo nút — e. g. một nhãn ở phía bên phải của một nút được căn trái

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  274. Chiều cao dòng của văn bản nhiều dòng, dưới dạng giá trị tương đối, không có đơn vị. Nó chỉ định khoảng cách dọc giữa mỗi dòng. Với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  467 [mặc định], các dòng được xếp chồng lên nhau trực tiếp mà không có khoảng trắng bổ sung giữa chúng. Ví dụ: với giá trị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  238, có khoảng trắng giữa mỗi dòng bằng với chiều cao hiển thị của một dòng văn bản

Căn chỉnh nhãn nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  277. Căn chỉnh dọc của nhãn của nút;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  281. Căn chỉnh dọc của nhãn của nút;

Căn chỉnh nhãn cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  285. Đối với nhãn nguồn của một cạnh, nhãn phải được đặt cách nút nguồn bao xa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  286. Đối với nhãn đích của một cạnh, nhãn nên được đặt cách nút đích bao xa

lợi nhuận

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  287. Lề dịch chuyển nhãn dọc theo trục x

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  288. Lề dịch chuyển nhãn dọc theo trục y

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  289. [Đối với nhãn nguồn của một cạnh. ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  290. [Đối với nhãn nguồn của một cạnh. ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  291. [Đối với nhãn mục tiêu của một cạnh. ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  292. [Đối với nhãn mục tiêu của một cạnh. ]

Xoay văn bản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  639. Một góc xoay được áp dụng cho nhãn
• Các vòng quay theo chiều kim đồng hồ
• Đối với các cạnh, giá trị đặc biệt

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  294 có thể được sử dụng để căn chỉnh nhãn với cạnh
• Đối với các nút, nhãn được xoay dọc theo điểm neo của nó trên nút, do đó, lề nhãn có thể giúp ích cho một số trường hợp sử dụng
• Giá trị đặc biệt

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  180 có thể được sử dụng để biểu thị

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  296
• Xoay hoạt động tốt nhất với văn bản từ trái sang phải

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  297. [Đối với nhãn nguồn của một cạnh. ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  298. [Đối với nhãn mục tiêu của một cạnh. ]

Đề cương

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  299. Màu của đường viền xung quanh văn bản nhãn của phần tử

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  300. Độ mờ của đường viền trên văn bản nhãn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  301. Kích thước của đường viền trên văn bản nhãn

Tiểu sử

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  302. Một màu để áp dụng trên nền văn bản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  303. Độ mờ của nền nhãn;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  305. Hình dạng để sử dụng cho nền nhãn, có thể là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  762 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  763

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  308. Một phần đệm trên nền của nhãn [e. g

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  136];

Biên giới

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  310. Chiều rộng của đường viền xung quanh nhãn;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  312. Chiều rộng của đường viền xung quanh nhãn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  313. Phong cách của đường viền xung quanh nhãn;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  318. Màu của đường viền xung quanh nhãn

tương tác

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  319. Nếu thu phóng làm cho kích thước phông chữ hiệu dụng của nhãn nhỏ hơn kích thước này thì không có nhãn nào được hiển thị. Lưu ý rằng do tối ưu hóa hiệu suất, nhãn có thể được hiển thị ở kích thước phông chữ nhỏ hơn một chút so với giá trị này. Hiệu ứng này rõ rệt hơn ở tỷ lệ pixel màn hình lớn hơn. Tuy nhiên, đảm bảo rằng nhãn sẽ được hiển thị ở kích thước bằng hoặc lớn hơn giá trị được chỉ định

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  320. Liệu các sự kiện có xảy ra trên một phần tử hay không nếu nhãn nhận được một sự kiện; . Bạn có thể muốn áp dụng kiểu cho văn bản trên

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  196 để bạn biết văn bản có thể kích hoạt được

Sự kiện

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  324. Liệu các sự kiện có nên xảy ra trên một phần tử hay không [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  325,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  326, v.v. ]; . Đối với

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  167, phần tử không nhận sự kiện và sự kiện chỉ chuyển qua lõi/khung nhìn. Thuộc tính

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  324 là mỗi phần tử, vì vậy giá trị của cha mẹ ghép không ảnh hưởng đến con của nó

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  320. Liệu các sự kiện có xảy ra trên một phần tử hay không nếu nhãn nhận được một sự kiện; . Bạn có thể muốn áp dụng kiểu cho văn bản trên

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  196 để bạn biết văn bản có thể kích hoạt được

lớp phủ

Các thuộc tính này cho phép tạo các lớp phủ trên đỉnh của các nút hoặc cạnh và thường được sử dụng ở trạng thái

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

196

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  336. Màu của lớp phủ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  337. Khu vực bên ngoài phần tử trong đó lớp phủ được hiển thị

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  338. Độ mờ của lớp phủ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  339. Hình dạng của lớp phủ nút; . Không áp dụng cho các cạnh

lớp lót

Các thuộc tính này cho phép tạo lớp lót phía sau các nút hoặc cạnh và thường được sử dụng ở trạng thái được đánh dấu

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  342. Màu sắc của lớp lót

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  343. Khu vực bên ngoài phần tử trong đó lớp lót được hiển thị

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  344. Độ trong suốt của lớp lót

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  345. Hình dạng của lớp lót nút; . Không áp dụng cho các cạnh

Con ma

Các thuộc tính bóng ma cho phép tạo hiệu ứng bóng ma, một bản sao bán trong suốt của phần tử được vẽ ở phần bù

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  348. Có sử dụng hiệu ứng bóng ma hay không;

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  351. Độ lệch ngang được sử dụng để định vị hiệu ứng bóng ma

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  352. Độ lệch dọc được sử dụng để định vị hiệu ứng bóng ma

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  353. Độ mờ của hiệu ứng ma

Hoạt hình chuyển tiếp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  354. Một danh sách các thuộc tính kiểu được phân tách bằng dấu cách để tạo hiệu ứng động ở trạng thái này

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  638. Độ dài của quá trình chuyển đổi [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  356]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  357. Độ dài của độ trễ trước khi quá trình chuyển đổi xảy ra [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  724]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  432. Chức năng nới lỏng kiểm soát đường cong tiến trình hoạt hình; . Một hình ảnh của nới lỏng phục vụ như một tài liệu tham khảo

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    360 [mặc định],

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    361

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    362 [bản trình diễn có chi tiết về các giá trị tham số],

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    363,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    364,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    365,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    366,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    367,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    368,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    369,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    370,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    371,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    372,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    373,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    374,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    375,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    376,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    377,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    378,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    379,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    380,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    381,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    382,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    383,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    384,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    385,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    386,

  • #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    387

Cốt lõi

Các thuộc tính này ảnh hưởng đến giao diện người dùng chung cho biểu đồ và chỉ áp dụng cho lõi. Bạn có thể sử dụng chuỗi bộ chọn

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

388 đặc biệt để đặt các thuộc tính này

chỉ báo

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  389. Màu của chỉ báo được hiển thị khi người dùng chụp nền

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  390. Độ mờ của chỉ báo nền hoạt động

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  391. Kích thước của chỉ báo nền hoạt động

hộp lựa chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  392. Màu nền của hộp chọn được sử dụng để kéo lựa chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  393. Màu của đường viền trên hộp chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  394. Kích thước của đường viền trên hộp lựa chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  395. Độ mờ của hộp chọn

Kết cấu trong cử chỉ chế độ xem

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  396. Màu của khu vực bên ngoài kết cấu khung nhìn khi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  397

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  398. Độ mờ của khu vực bên ngoài kết cấu khung nhìn

đối tượng sự kiện

Các sự kiện được chuyển đến các lệnh gọi lại của trình xử lý tương tự như các đối tượng sự kiện jQuery và các sự kiện tổng hợp React ở chỗ chúng bao bọc các đối tượng sự kiện gốc, bắt chước API của chúng

Lĩnh vực

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  62. một tham chiếu đến phiên bản cốt lõi tương ứng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  79. cho biết yếu tố hoặc lõi đầu tiên gây ra sự kiện

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  401. chuỗi loại sự kiện [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  402]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  403. chuỗi không gian tên sự kiện [e. g.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  404 cho

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  405]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  406. Unix epoch thời gian của sự kiện tính bằng mili giây

Các trường chỉ dành cho sự kiện thiết bị đầu vào của người dùng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  657. cho biết vị trí mô hình của sự kiện

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  658. cho biết vị trí kết xuất của sự kiện

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  409. đối tượng sự kiện thiết bị đầu vào của người dùng ban đầu

Các trường chỉ dành cho các sự kiện bố cục

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  69. cho biết bố cục tương ứng đã kích hoạt sự kiện [hữu ích nếu chạy đồng thời nhiều bố cục]

bong bóng sự kiện

Tất cả các sự kiện xảy ra trên các phần tử được đưa lên và sau đó đến phần lõi. Bạn phải cân nhắc điều này khi nghe cốt lõi để có thể phân biệt giữa các sự kiện xảy ra trên nền và các sự kiện xảy ra trên các phần tử. Sử dụng trường

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

411, cho biết người khởi xướng sự kiện [i. e.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

412]

Sự kiện thiết bị đầu vào của người dùng

Đây là những sự kiện trình duyệt bình thường mà bạn có thể nghe qua Cytoscape. js. Bạn có thể nghe những sự kiện này trên lõi và trên các bộ sưu tập

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  413. khi nút chuột được nhấn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  414. khi nút chuột được thả ra

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  415. sau

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  413 rồi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  414

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  326. khi con trỏ được đặt lên trên mục tiêu

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  419. khi con trỏ di chuyển ra khỏi mục tiêu

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  420. khi con trỏ được di chuyển đến đâu đó trên đầu mục tiêu

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  421. khi một hoặc nhiều ngón tay bắt đầu chạm vào màn hình

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  422. khi một hoặc nhiều ngón tay được di chuyển trên màn hình

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  423. khi một hoặc nhiều ngón tay bị xóa khỏi màn hình

Ngoài ra còn có một số sự kiện cấp cao hơn mà bạn có thể sử dụng để không phải nghe các sự kiện khác nhau cho thiết bị nhập liệu bằng chuột và cho thiết bị cảm ứng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  424 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  425. sự kiện bắt đầu nhấn được chuẩn hóa [hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  413 hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  421]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  428 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  429. sự kiện di chuyển được chuẩn hóa [hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  422 hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  420]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  432. chuẩn hóa trên sự kiện phần tử [hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  422 hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  420/

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  326]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  436. được chuẩn hóa khỏi sự kiện phần tử [hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  422 hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  420/

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  419]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  440 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  441. sự kiện kết thúc nhấn được chuẩn hóa [hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  414 hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  423]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  325 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  445. sự kiện nhấn được chuẩn hóa [hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  415, hoặc là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  421, sau đó là

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  423 mà không có

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  422]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  450 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  451 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  452. sự kiện nhấn được chuẩn hóa [kích hoạt sau một thời gian gỡ lỗi nhất định để lần đầu tiên kiểm tra sự kiện ________ 0453 - ________ 0454. được đặt thành 250ms theo mặc định]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  455 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  456 hoặc

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  453. sự kiện chạm hai lần được chuẩn hóa [hai

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  415 tiếp theo hoặc hai

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  421 tiếp theo theo sau bởi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  423 mà không có

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  422]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  462. sự kiện giữ vòi được chuẩn hóa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  463. nhấp chuột phải chuột xuống chuẩn hóa hoặc dùng hai ngón tay

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  424

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  465. nhấp chuột phải được chuẩn hóa vào

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  414 hoặc bằng hai ngón tay

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  440

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  468. nhấp chuột phải chuẩn hóa hoặc dùng hai ngón tay

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  325

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  470. di chuột được chuẩn hóa hoặc kéo bằng hai ngón tay sau

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  463 nhưng trước

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  465

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  473. khi đi qua một nút qua

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  470

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  475. khi tắt một nút qua

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  470

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  477. khi bắt đầu chọn hộp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  478. khi kết thúc lựa chọn hộp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  479. được kích hoạt trên các phần tử khi được chọn bằng cách chọn hộp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  480. được kích hoạt trên các phần tử khi ở trong hộp trên

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  478

sự kiện bộ sưu tập

Những sự kiện này là tùy chỉnh đối với Cytoscape. js. Bạn có thể nghe những sự kiện này cho các bộ sưu tập

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  490. khi một phần tử được thêm vào biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  489. khi một phần tử bị xóa khỏi biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  491. khi một phần tử được di chuyển w. r. t. cấu trúc liên kết
  • điểm giao. khi hợp chất

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    76 được thay đổi
  • cạnh. khi

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    78 hoặc

    #cy {
      width: 300px;
      height: 300px;
      display: block;
    }
    

    79 bị thay đổi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  488. khi một phần tử được chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  489. khi một phần tử không được chọn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  490. khi một phần tử được chọn bằng cử chỉ nhấn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  491. khi một phần tử không được chọn bằng một lần nhấn ở nơi khác

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  479. được kích hoạt trên các phần tử khi được chọn bằng cách chọn hộp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  480. được kích hoạt trên các phần tử khi ở trong hộp trên

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  478

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  495. khi một phần tử bị khóa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  496. khi một yếu tố được mở khóa

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  497. khi một phần tử được lấy trực tiếp [chỉ bao gồm một nút ngay dưới con trỏ hoặc ngón tay của người dùng]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  498. khi một phần tử được lấy [bao gồm tất cả các phần tử sẽ được kéo]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  499. khi một phần tử được lấy và sau đó di chuyển

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  500. khi một phần tử được giải phóng [i. e. buông tay khỏi bị nắm bắt]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  501. khi một phần tử được giải phóng trực tiếp [chỉ bao gồm một nút ngay dưới con trỏ hoặc ngón tay của người dùng]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  502. khi một phần tử được giải phóng sau khi bị kéo [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  498 rồi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  499 rồi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  500]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  506. khi một phần tử được giải phóng sau khi được kéo trực tiếp [i. e.

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  497,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  499,

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  501]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  657. khi một phần tử thay đổi vị trí

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  77. khi dữ liệu của một phần tử bị thay đổi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  512. khi dữ liệu bàn di chuột của một phần tử bị thay đổi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  209. khi phong cách của một phần tử được thay đổi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  514. khi hình nền của nút được tải

Biểu đồ sự kiện

Những sự kiện này là tùy chỉnh đối với Cytoscape. js và chúng xảy ra trên lõi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  515. khi bố cục bắt đầu chạy

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  516. khi bố cục đã đặt vị trí ban đầu cho tất cả các nút [nhưng có lẽ không phải là vị trí cuối cùng]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  517. khi bố cục chạy xong hoàn toàn hoặc ngừng chạy

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  518. khi một phiên bản mới của Cytoscape. js đã sẵn sàng để tương tác với

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  519. khi phiên bản của Cytoscape. js đã bị phá hủy rõ ràng bằng cách gọi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  520

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  521. khi khung nhìn được [kết xuất lại]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  227. khi chế độ xem được quét

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  523. khi chế độ xem được xoay bằng cách kéo

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  223. khi khung nhìn được phóng to

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  525. khi chế độ xem được thu phóng thông qua cử chỉ chụm. Sự kiện này chỉ được hỗ trợ cho các trình duyệt hỗ trợ sự kiện thay đổi cử chỉ hoặc sự kiện chạm. Các trình duyệt khác sẽ kích hoạt sự kiện

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  526

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  526. khi chế độ xem được thu phóng thông qua bánh xe cuộn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  528. khi chế độ xem bị thay đổi [tôi. e. từ một

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  227, một

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  223, hoặc từ cả hai khi phóng to về một điểm – e. g. véo để phóng to]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  427. khi khung nhìn được thay đổi kích thước [thường bằng cách gọi

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  423, thay đổi kích thước

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  426 hoặc chuyển đổi một lớp trên Cytoscape. j div]

Chức năng của bố cục là đặt vị trí trên các nút trong biểu đồ. Bố cục là của Cytoscape. js sao cho bất kỳ ai cũng có thể viết bố cục mà không cần sửa đổi chính thư viện

Một số bố cục được bao gồm trong Cytoscape. js theo mặc định và các tùy chọn của chúng được mô tả trong các phần tiếp theo với các giá trị mặc định được chỉ định. Lưu ý rằng bạn phải đặt

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

437 thành tên của bố cục để chỉ định bố cục nào bạn muốn chạy

Mỗi bố cục có thuật toán riêng để đặt vị trí cho từng nút. Thuật toán này ảnh hưởng đến hình dạng tổng thể của đồ thị và độ dài của các cạnh. Thuật toán của bố cục có thể được tùy chỉnh bằng cách đặt các tùy chọn của nó. Do đó, độ dài cạnh có thể được kiểm soát bằng cách thiết lập các tùy chọn bố cục phù hợp

Đối với bố cục hướng lực [vật lý], thường có một tùy chọn để đặt trọng số cho từng cạnh để ảnh hưởng đến độ dài cạnh tương đối. Độ dài cạnh cũng có thể bị ảnh hưởng bởi các tùy chọn như hệ số khoảng cách, góc và tránh chồng chéo. Việc đặt độ dài cạnh phụ thuộc vào bố cục cụ thể và một số bố cục sẽ cho phép độ dài cạnh chính xác hơn các bố cục khác

Bố cục chạy trên biểu đồ con mà bạn chỉ định. Tất cả các phần tử trong biểu đồ được sử dụng cho. Tập hợp con được chỉ định của các phần tử được sử dụng cho. Trong cả hai trường hợp, trạng thái của từng phần tử không ảnh hưởng đến việc phần tử đó có được xem xét trong bố cục hay không. Ví dụ: một bố cục được định vị lại nếu nút được bao gồm trong tập hợp các phần tử của bố cục. Bạn có thể sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

273 để giải quyết các trường hợp sử dụng phức tạp, chẳng hạn như chạy một bố cục khác nhau trên mỗi thành phần

Khi chạy một phiên bản không có đầu, bạn có thể cần chỉ định

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

538 để chỉ ra khu vực mà bố cục có thể đặt các nút trong đó. Trong một trường hợp được kết xuất, các giới hạn có thể được suy ra theo kích thước của phần tử HTML DOM

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

203

Tham khảo blog để biết hướng dẫn bố cục chuyên sâu

vô giá trị

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

405 đặt tất cả các nút tại [0, 0]. Nó hữu ích cho mục đích gỡ lỗi

Tùy chọn

ngẫu nhiên

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

541 đặt các nút ở các vị trí ngẫu nhiên trong chế độ xem

Tùy chọn

đặt trước

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

220 đặt các nút ở vị trí bạn chỉ định thủ công

Tùy chọn

lưới

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

543 đặt các nút trong một lưới cách đều nhau

Tùy chọn

vòng tròn

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

154 đặt các nút trong một vòng tròn

Tùy chọn

đồng tâm

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

545 định vị các nút trong các vòng tròn đồng tâm, dựa trên số liệu mà bạn chỉ định để phân tách các nút thành các cấp. Bố cục này đặt giá trị

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

545 trong

Tùy chọn

theo chiều rộng

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

548 đặt các nút trong một hệ thống phân cấp, dựa trên đường duyệt theo chiều rộng của biểu đồ. Nó phù hợp nhất với cây và rừng ở chế độ từ trên xuống mặc định và phù hợp nhất với DAG ở chế độ vòng tròn

Tùy chọn

cose

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

549 [Compound Spring Embedder] sử dụng mô phỏng vật lý để bố trí biểu đồ. Nó hoạt động tốt với các đồ thị không hợp chất và nó có logic bổ sung để hỗ trợ tốt các đồ thị hợp chất

Nó được thực hiện bởi Gerardo Huck như một phần của Google Summer of Code 2013 [Người cố vấn. Max Franz, Christian Lopes, Anders Riutta, Ugur Dogrusoz]

Dựa trên bài viết “Một thuật toán bố cục cho đồ thị hỗn hợp vô hướng” của Ugur Dogrusoz, Erhan Giral, Ahmet Cetintas, Ali Civril và Emek Demir

Bố cục

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

549 rất nhanh và cho kết quả tốt. Tiện ích mở rộng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

551 là một sự phát triển của thuật toán đắt hơn về mặt tính toán nhưng tạo ra kết quả gần như hoàn hảo

Tùy chọn

Thao tác bố cục

Các bố cục có một tập hợp các chức năng có sẵn cho chúng, cho phép thực hiện hành vi phức tạp hơn so với trường hợp sử dụng chính chạy một bố cục tại một thời điểm. Bố cục mới, có thể truy cập của nhà phát triển có thể được thực hiện thông qua

Bắt đầu chạy bố cục

Thông tin chi tiết

Nếu bố cục không đồng bộ [i. e. liên tục], sau đó gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

553 chỉ cần bắt đầu bố cục. đồng bộ [tôi. e. bố trí rời rạc] kết thúc trước khi trả về

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

553. Bất cứ khi nào bố cục được bắt đầu, sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

515 được phát ra

Bố cục sẽ phát ra sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

517 khi nó kết thúc hoặc đã bị dừng [e. g. bằng cách gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

557]. Nhà phát triển có thể nghe

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

517 bằng cách sử dụng hoặc thiết lập các tùy chọn bố cục một cách thích hợp với lệnh gọi lại

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

49

Ngừng chạy bố cục [không đồng bộ/rời rạc]

Thông tin chi tiết

Gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

557 dừng bố cục không đồng bộ [liên tục]. Nó rất hữu ích nếu bạn muốn dừng sớm một bố cục đang chạy

ví dụ

sự kiện bố trí

Lắng nghe các sự kiện được phát ra bởi bố cục

cách trình bày. bật[ , sự kiện [, dữ liệu], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• dữ liệu [tùy chọn]

  Một đối tượng đơn giản được chuyển đến trình xử lý trong đối số đối tượng sự kiện

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

Nhận một lời hứa được giải quyết khi bố cục phát ra sự kiện đầu tiên trong số các sự kiện được chỉ định

cách trình bày. PromiseOn[ , sự kiện ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

50

Lắng nghe các sự kiện do bố cục phát ra và chỉ chạy trình xử lý một lần

cách trình bày. một[ , sự kiện [, dữ liệu], chức năng[sự kiện] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• dữ liệu [tùy chọn]

  Một đối tượng đơn giản được chuyển đến trình xử lý trong đối số đối tượng sự kiện

• chức năng [sự kiện]

  Hàm xử lý được gọi khi một trong các sự kiện đã chỉ định xảy ra

Xóa trình xử lý sự kiện trên bố cục

cách trình bày. removeListener[ , sự kiện [, trình xử lý] ]

• Danh sách tên sự kiện được phân tách bằng dấu cách

• trình xử lý [tùy chọn]

  Một tham chiếu đến chức năng xử lý để loại bỏ

cách trình bày. removeAllListeners[]

Xóa tất cả các trình xử lý sự kiện trên bố cục

Phát ra một hoặc nhiều sự kiện trên bố cục

cách trình bày. phát ra[ , sự kiện [, extraParams] ]

• Danh sách các tên sự kiện sẽ phát ra [một chuỗi được phân tách bằng dấu cách hoặc một mảng]

• extraParams [tùy chọn]

  Một mảng các tham số bổ sung để chuyển đến trình xử lý

Hoạt ảnh thể hiện sự thay đổi trạng thái có thể nhìn thấy trong một khoảng thời gian đối với một phần tử. Hoạt ảnh có thể được tạo thông qua [đối với hoạt ảnh trên khung nhìn] và [đối với hoạt ảnh trên các phần tử biểu đồ]

thao tác hoạt ảnh

Yêu cầu phát hoạt ảnh, bắt đầu từ khung hình tiếp theo. Nếu hoạt ảnh hoàn tất, nó sẽ khởi động lại từ đầu

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

51

Nhận xem hoạt ảnh hiện đang phát hay không

Nhận hoặc đặt khoảng cách hoạt hình đã tiến triển

Nhận tiến trình của hoạt ảnh theo phần trăm

Đặt tiến trình của hoạt ảnh theo phần trăm

• tiến triển

  Tiến độ tính bằng phần trăm [i. e. bao gồm từ 0 đến 1] để đặt thành hoạt ảnh

Nhận tiến trình của hoạt ảnh tính bằng mili giây

Đặt tiến trình của hoạt ảnh tính bằng mili giây

• thời gian

  Tiến trình tính bằng mili giây [i. e. giữa 0 và bao gồm thời lượng] để đặt thành hoạt ảnh

Tua lại hoạt ảnh từ đầu

Tua nhanh hoạt ảnh đến cuối

Tạm dừng hoạt ảnh, duy trì tiến độ hiện tại

Dừng hoạt ảnh, duy trì tiến trình hiện tại và xóa hoạt ảnh khỏi bất kỳ hàng đợi liên quan nào

Thông tin chi tiết

Chức năng này hữu ích trong trường hợp bạn không muốn chạy hoạt ảnh nữa. Gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563 tương tự như gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

564 ở chỗ hoạt ảnh không còn được xếp hàng

Gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563 làm cho khung hoạt hình nhanh hơn bằng cách giảm số lượng hoạt ảnh để kiểm tra mỗi phần tử trên mỗi khung. Bạn nên gọi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

563 khi muốn dọn sạch một hoạt ảnh, đặc biệt trong các tình huống có nhiều hoạt ảnh. Bạn vẫn có thể sử dụng lại hoạt ảnh đã dừng, nhưng hoạt ảnh chưa bị dừng không thể bị thu gom rác trừ khi mục tiêu được liên kết của nó [i. e. phần tử hoặc phiên bản cốt lõi] cũng được thu gom rác

ví dụ

Nhận xem hoạt ảnh đã tiến triển đến cuối chưa

Áp dụng hình ảnh động ở tiến trình hiện tại của nó

Thông tin chi tiết

Chức năng này cho phép bạn chuyển trực tiếp đến một tiến trình cụ thể của hoạt ảnh khi nó tạm dừng

ví dụ

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

52

Nhận xem hoạt hình hiện đang áp dụng

Đảo ngược hoạt hình sao cho điều kiện bắt đầu và điều kiện kết thúc của nó bị đảo ngược

Nhận một lời hứa được thực hiện với sự kiện hoạt hình được chỉ định

Nhận một lời hứa được thực hiện với sự kiện

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

567 tiếp theo

ani. lời hứa[ , animationEvent ]

Nhận một lời hứa được thực hiện với sự kiện hoạt hình được chỉ định

• hoạt hìnhsự kiện

  Một chuỗi cho tên sự kiện;

ví dụ

Khi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

571 đã cập nhật kiểu phần tử

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

53

Khi

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

572 hoàn thành

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

54

Bạn có thể sử dụng tiện ích mở rộng [e. g.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

573] như sau với

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

574

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

55

Sử dụng

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

91, ví dụ trên sẽ là

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

56

Các tiện ích mở rộng bên dưới là danh sách được sắp xếp. Để thêm tiện ích của bạn, vui lòng gửi yêu cầu bao gồm URL của tiện ích và một dòng mô tả

biểu thị tiện ích mở rộng của bên thứ nhất, tiện ích mở rộng được duy trì bởi các nhóm được liên kết với Cytoscape Consortium

biểu thị tiện ích mở rộng của bên thứ ba, tiện ích mở rộng được duy trì bởi các nhà phát triển bên ngoài

tiện ích mở rộng giao diện người dùng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  576. Cho phép xoay khi kéo trên các nút hoặc cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  577. Tự động cập nhật các vị trí nút dựa trên các quy tắc đã chỉ định [e. g. đồng bộ hóa các chuyển động của nút, chuyển động hạn chế, v.v. ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  578. Tự động xoay khung nhìn khi các nút được kéo ra ngoài giới hạn của khung nhìn

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  579. Nhóm trực quan một tập hợp các phần tử thông qua tập hợp bong bóng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  580. Một tiện ích mở rộng để tạo khung vẽ trên hoặc dưới biểu đồ Cytoscape. Hữu ích cho việc tùy chỉnh các nút/cạnh, vẽ nền, v.v.

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  581. Cho phép hiển thị nhanh và tương tác các mạng tương tác phân tử được phân tầng dựa trên nội địa hóa dưới tế bào hoặc chú thích tùy chỉnh khác

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  582. Giao diện người dùng kéo và thả nút hợp chất để thêm và xóa phần tử con

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  583. Một menu nhấp chuột phải truyền thống

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  584. Menu ngữ cảnh hình tròn cho phép thực hiện các lệnh bằng một lần vuốt trên biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  585. Sử dụng phần tử HTML làm phần thân của nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  586. Giao diện người dùng để chỉnh sửa các cạnh uốn cong [các cạnh phân đoạn và các cạnh bezier]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  587. Thêm tay cầm vào các nút và cho phép tạo các loại cạnh khác nhau

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  588. Cho phép các cạnh kết nối trực quan với các cạnh khác, theo Mô hình dữ liệu liên kết

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  589. Giao diện người dùng để kết nối các nút với các cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  590. Bố cục thay đổi kích thước con để phù hợp với cha mẹ cho dù có bao nhiêu

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  591. Cung cấp API để mở rộng và thu gọn các nút gốc phức hợp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  592. Thêm chức năng lưới và chụp nhanh vào biểu đồ Cytoscape

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  593. Giao diện người dùng lựa chọn Lasso

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  594. Đơn giản hóa việc tạo và quản lý các lớp bổ sung ở định dạng SVG, HTML hoặc Canvas với các tiện ích bổ sung để hiển thị các phần tử trên mỗi nút hoặc cạnh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  595. Cho phép hiển thị bản đồ Tờ rơi bên dưới hình ảnh trực quan Cytoscape

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  596. Hiển thị biểu đồ Cytoscape trên bản đồ Mapbox GL

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  597. Tiện ích xem toàn cảnh của biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  598. Ngăn các nút chồng lên nhau khi kéo

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  599. Cho phép chỉ định HTML làm nhãn cho các nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  600. Tiện ích mở rộng thay đổi kích thước nút có khả năng tùy biến cao với giao diện người dùng truyền thống

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  601. Kiểm soát thay đổi kích thước nút tối giản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  602. Lớp phủ hiển thị các thanh, biểu đồ, biểu đồ thu nhỏ, biểu đồ thu nhỏ nhị phân, ký hiệu [dữ liệu phân loại] hoặc ô vuông bên cạnh các nút

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  603. Tiện ích giao diện người dùng panzoom

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  604. Một trình bao bọc cho Popper. js cho phép bạn định vị các div tương ứng với các phần tử Cytoscape [có thể được sử dụng với Tippy. js để tạo chú giải công cụ]

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  605. Trình bao bọc cho phép bạn sử dụng qTips trên các phần tử biểu đồ hoặc nền biểu đồ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  606. Thêm snap-to-grid và gridlines vào Cytoscape. đồ thị js

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  607. Hỗ trợ hình ảnh trên Cytoscape. js

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  608. Cho phép người dùng tạo thanh công cụ tùy chỉnh để thêm bên cạnh phiên bản lõi Cytoscape

Tiện ích mở rộng bố cục

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  609. cola. bố cục mô phỏng vật lý js [hướng lực]. Cola tạo ra kết quả bố cục đẹp mắt, hoạt hình rất mượt mà và có các tùy chọn tuyệt vời để kiểm soát bố cục. Nó tập trung vào việc mang lại kết quả thẩm mỹ cho các biểu đồ tương đối nhỏ

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  610. Bố cục AVSDF. Nó tổ chức các nút trong một vòng tròn và cố gắng giảm thiểu giao cắt cạnh càng nhiều càng tốt

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  611. Bố cục CiSE tạo các cụm hình tròn và sử dụng mô phỏng vật lý [thuật toán hướng lực] để tạo khoảng cách giữa các cụm

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  551. Bố cục CoSE của Bilkent với vị trí nút phức hợp nâng cao. CoSE Bilkent là một bố cục mô phỏng vật lý [hướng lực] mang lại kết quả cuối cùng gần như hoàn hảo. Tuy nhiên, nó đắt hơn cả

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  549 và

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  614

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  615. Compound Spring Embedder with Ports [CoSEP] là thuật toán bố cục hướng lực dựa trên CoSE [Compound Spring Embedder] để hỗ trợ các ràng buộc cổng trên biểu đồ phức hợp

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  616. Bố trí lực lượng D3. Nó sử dụng thuật toán mô phỏng vật lý cơ bản [hướng lực] tạo ra kết quả tốt cho các biểu đồ nhỏ, đơn giản

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  617. Bố cục Dagre cho DAG và cây cối. Nó tổ chức biểu đồ theo thứ bậc

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  618. Bộ điều hợp thuật toán bố cục ELK cho Cytoscape. js. Nó chứa một số thuật toán bố trí

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  619. Euler là một bố cục hướng lực [mô phỏng vật lý] nhanh, kích thước tệp nhỏ, chất lượng cao. Nó tốt cho các đồ thị không hợp chất và nó có hỗ trợ cơ bản cho các đồ thị hợp chất

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  614. Bố cục fCoSE là phiên bản nhanh hơn của bố cục CoSE-Bilkent. Nó hỗ trợ các biểu đồ phức hợp và không hợp chất, mang lại kết quả cuối cùng ở cấp cao nhất và hiệu suất cao cho bố cục theo hướng bắt buộc. Ngoài ra, fCoSE hỗ trợ các ràng buộc do người dùng chỉ định thuộc các loại sau trên các nút. vị trí cố định, căn chỉnh và vị trí tương đối. Nếu bạn muốn sử dụng bố cục hướng lực, fCoSE phải là bố cục đầu tiên bạn thử

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  621. Klay là một bố cục hoạt động tốt cho hầu hết các loại biểu đồ. Nó mang lại kết quả tốt cho các biểu đồ thông thường và nó xử lý các DAG và biểu đồ phức hợp rất độc đáo

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  622. Bố cục mô phỏng vật lý hoạt động đặc biệt tốt trên đồ thị phẳng. Nó tương đối nhanh

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  623. Bố cục cho dữ liệu GWAS [nghiên cứu liên kết trên toàn bộ bộ gen] minh họa các mối quan hệ giữa các địa điểm

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  624. Bố cục mô phỏng vật lý trải rộng [hướng lực] cố gắng sử dụng tất cả không gian khung nhìn, nhưng nó có thể được định cấu hình để tạo ra kết quả chặt chẽ hơn. Nó sử dụng thuật toán CoSE ban đầu và nó sử dụng Gansner và North cho giai đoạn mở rộng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  625. Bố cục mô phỏng vật lý Springy. Đó là bố cục vật lý cơ bản [hướng lực]

tiện ích mở rộng API

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  626. Nhận tất cả các đường dẫn dài nhất, có hướng

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  627. Thêm các tiện ích sao chép-dán vào Cytoscape. js

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  453. Thêm một sự kiện

  #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  453 vào Cytoscape. js

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  630. Thêm chức năng nhập và xuất GraphML vào Cytoscape. js

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  631. Cung cấp các tiện ích bố cục linh tinh để quản lý vị trí của các nút hoặc thành phần mà không có thông tin bố cục

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  632. Thêm API hoàn tác làm lại vào Cytoscape. js

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  633. Thêm API tìm kiếm và đánh dấu vào Cytoscape. js

Gói tiện ích

Sự đăng ký

Để đăng ký tiện ích mở rộng, hãy thực hiện cuộc gọi sau.

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

634

Giá trị của

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

401 có thể nhận các giá trị sau

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  636. Phần mở rộng thêm một chức năng cốt lõi

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  637. Tiện ích mở rộng thêm chức năng thu thập

• #cy {
    width: 300px;
    height: 300px;
    display: block;
  }
  

  638. Tiện ích mở rộng đăng ký nguyên mẫu bố cục

Đối số

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

219 cho biết tên của phần mở rộng, e. g. thanh ghi mã sau

#cy {
  width: 300px;
  height: 300px;
  display: block;
}

640