Các liên kết trong các đối tượng d3.js

Tôi là một người mới hoàn thành tại d3.js hoặc java nói chung. Tôi đang sử dụng ví dụ về cây thụt lề từ http://bl.ocks.org/1093025. Tôi mất hai giờ để có được điều này để làm việc trên máy tính địa phương của tôi, do đó sẽ cung cấp cho bạn một ý tưởng về mức độ kỹ năng của tôi.Các liên kết trong các đối tượng d3.js

Tôi đã mở tệp flare.json và bắt đầu lộn xộn với nó và có thể thao tác thành công. Có vẻ như đây là

{ 
    "name": "Test D3", 
    "children": [ 
     { 
      "name": "News", 
      "children": [ 
       { 
        "name": "CNN", 
        "size": 1000 
       }, 
       { 
        "name": "BBC", 
        "size": 3812 
       } 
      ] 
     }, 
     { 
      "name": "Blogs", 
      "children": [ 
       { 
        "name": "Engaget", 
        "size": 3938 
       } 
      ] 
     }, 
     { 
      "name": "Search", 
      "children": [ 
       { 
        "name": "Google", 
        "size": 3938 
       }, 
       { 
        "name": "Bing", 
        "size": 3938 
       } 
      ] 
     } 
    ] 
}

Điều tôi muốn làm bây giờ là cố gắng thêm siêu liên kết. Ví dụ, tôi muốn có thể bấm vào "CNN" và đi đến CNN.com. Có một sửa đổi tôi có thể thực hiện để flare.json sẽ làm điều đó?

Nguồn

2012-10-27 Mr. Fegur

Rất dễ dàng, chỉ cần thêm một số cặp "khóa": "giá trị" khác. Ví dụ:

 "children": [ 
      { 
       "name": "Google", 
       "size": 3938, 
       "url": "https://www.google.com" 

      }, 
      { 
       "name": "Bing", 
       "size": 3938, 
       "url": "http://www.bing.com" 

      } 
     ]

Tất nhiên, trong mã d3 của bạn sau đó bạn cần phải append<svg:a> thẻ và thiết lập thuộc tính xlink:href của họ.

Dưới đây là một số mã html và d3 có thể giúp bạn. Trước tiên, bạn cần phải nhập không gian tên XLink trong file html của bạn:

<html xmlns:xlink="http://www.w3.org/1999/xlink"> 
... 
</html>

Sau đó, trong mã vẽ d3 nơi bạn thêm các nút cho mỗi phần tử dữ liệu bạn quấn các yếu tố bạn muốn được liên kết thể nhấp cùng với một thẻ svg:a:

nodeEnter.append("svg:a") 
    .attr("xlink:href", function(d){return d.url;}) // <-- reading the new "url" property 
.append("svg:rect") 
    .attr("y", -barHeight/2) 
    .attr("height", barHeight) 
    .attr("width", barWidth) 
    .style("fill", color) 
    .on("click", click); // <- remove this if you like

Bạn có thể muốn xóa trình xử lý nhấp chuột (có trong ví dụ ban đầu) bằng cách xóa .on ("nhấp", nhấp) vì nó có thể ảnh hưởng đến hành vi mặc định của liên kết SVG.

Nhấp vào số rect giây của bạn sẽ dẫn bạn đến url thích hợp. Liên kết SVG có thể không được triển khai đầy đủ trong tất cả các trình duyệt.

Hoặc bạn có thể sửa đổi trình xử lý click để đọc URL từ d.url và sử dụng trình xử lý đó để chuyển hướng trình duyệt theo cách thủ công đến URL đó thông qua JavaScript: window.location = d.url;. Sau đó, bạn không cần thẻ svg:a và mã xlink. Mặc dù việc thêm một liên kết thực (không phải là một liên kết theo kịch bản) có lợi ích là người dùng/trình duyệt có thể quyết định phải làm gì (ví dụ: mở trong tab/trang mới). Nó cũng giúp nếu một số người dùng của bạn đã tắt JavaScript.

Nguồn

2012-10-28 13:27:45 Juve

Cảm ơn rất nhiều. Tôi đã có thể làm cho nó hoạt động với câu trả lời của bạn. –

Về việc ** trình duyệt ** nào ** hỗ trợ liên kết SVG **, hãy xem tại đây: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28Scalable_Vector_Graphics%29 – rmoestl

Lưu ý rằng ít nhất trong Chrome bạn không cần khai báo bất kỳ không gian tên nào ở bất cứ đâu và trong D3.js v3 bạn chỉ có thể viết '.append ('a')' thay vì '.append ('svg: a')'. Tuy nhiên, bạn vẫn cần phải viết 'xlink: href'. Nếu bạn vẫn muốn các không gian tên trong DOM, có vẻ như bây giờ bạn phải sử dụng [hack này] (https://groups.google.com/forum/#!msg/d3-js/Sh4ysLFBMRQ/hHjzBP0bX1oJ) để giữ chúng khỏi biến mất khi bạn chèn chúng với D3.js. – mb21

Các liên kết trong các đối tượng d3.js

Trả lời

Các vấn đề liên quan