d3.js: cách thức sao lưu DOM

Question

Tôi không hoàn toàn chắc chắn về (các) khía cạnh nào của javascript, DOM hoặc d3.js điều này cho thấy sự thiếu kiến ​​thức của tôi về: chỉ biết rằng tôi xin lỗi vì hỏi một câu hỏi cơ bản như sau. Tôi là người mới ở đây.

Tôi có một json như thế này:

[{"link":"a", "count": 3}, {"link":"b", "count": 4}, {"link":"c", "count": 2}] 

và tôi muốn làm cái gì đó trông giống như

<ul> 
    <li> <a>a</a> (3)</li> 
    <li> <a>b</a> (4)</li> 
    <li> <a>c</a> (2)</li> 
</ul> 

sử dụng d3.js (để giải quyết rõ ràng: Tôi muốn làm một LOT nhiều hơn với d3, điều này chỉ chụp một vấn đề tôi có).

Sau popping một thẻ <ul> trong html của tôi, đâu đó trong một callback từ d3.json tôi có thể viết một cái gì đó như thế này:

d3.select("ul") 
    .selectAll("li") 
    .data(json) 
    .enter() 
    .append("li") 
    .append("a") 
    .text(function(d){return d.link}) 

(!? Mặc dù điều này là chưa được kiểm tra làm thế nào để người javascript kiểm tra phế liệu ít code) . Điều này sẽ (có thể) cho tôi

<ul> 
    <li><a>a</a></li> 
    <li><a>b</a></li> 
    <li><a>c</a></li> 
</ul> 

nhưng bây giờ tôi không thể thoát ra khỏi thẻ <a>! Tôi không thể tìm ra sự kết hợp không hợp lệ của this và chọn bố mẹ hoặc tôi không cần phải làm gì để tiếp tục thêm thông tin đó trước khi đóng thẻ mục danh sách. Tôi cần phải làm gì?

Answer 1

Đơn giản: không đi quá mức với chuỗi phương pháp. :)

var ul = d3.select("ul"); 

var li = ul.selectAll("li") 
    .data(json) 
    .enter().append("li"); 

var a = li.append("a") 
    .text(function(d) { return d.link; }); 

Bây giờ bạn có thể thêm các nội dung khác vào li. Trong trường hợp này, vì D3 chỉ cho phép bạn thêm các phần tử (chứ không phải các nút văn bản thô), bạn có thể muốn thêm một khoảng cho văn bản gốc:

li.append("span") 
    .text(function(d) { return " (" + d.count + ")"; });