2012-06-13 41 views
15

Trong backbone.js, chức năng hiển thị của khung nhìn tạo ra html chưa được đính kèm mà sau này có thể được đính kèm với phần tử dom.Hiển thị trong Backbone.js bằng cách sử dụng d3.js và svgs

Hiện tại, tôi phải có mục tiêu hiện tại trong HTML để tôi gắn thêm svg vào. Sau đó tôi sử dụng mẫu dữ liệu/nhập để chèn các phần tử vào svg. Có cách nào để có được d3.js để tạo ra svg mà không gắn nó vào dom?

var svg = d3.select("#target").append('svg') 
    .attr("viewBox","0 0 100 100"); 

svg.selectAll("circle") 
    .data(data) 
    .enter().append("circle") 
     .attr("r", 10) 
     .style("fill", "black"); 

Hoặc, có thể cung cấp d3 với phần tử dom không gắn liền để chắp thêm nội dung không? Một cái gì đó như thế này? D3.js tài liệu cho thấy rằng chọn có thể chấp nhận các nút, nhưng sau đó không làm việc cho tôi, hoặc

var svg = d3.select(this.$el).append('svg') // Uncaught TypeError: Object [object Object] has no method 'appendChild' 
    .attr("viewBox","0 0 100 100");  

svg.selectAll("circle") 
    .data([1,2,3]) 
    .enter().append("circle") 
     .attr("r", 10) 
     .style("fill", "black"); 
+2

Bạn đã thử 'd3.selectAll ([this.el])' chưa? D3 có thể không hài lòng với một đối tượng jQuery, nó có thể muốn một mảng thực. –

+0

Tôi đã thử (không hoạt động). Nhân tiện, tài liệu d3 tôi đã đề cập đến cho thấy rằng d3 không chơi độc đáo với các đối tượng Jquery. https://github.com/mbostock/d3/wiki/Selections#wiki-d3_select -> "Những phương pháp này cũng có thể chấp nhận các nút, rất hữu ích cho việc tích hợp với các thư viện của bên thứ ba như jQuery hoặc các công cụ phát triển" – kumikoda

Trả lời

12

Tôi tìm thấy câu trả lời trong bài viết này SVG not rendering properly as a backbone view

d3.select(this.el) 

hiện các trick!

+3

Có, d3 không thể chọn đối tượng jquery. 'd3.select (this. $ el [0])' cũng sẽ hoạt động. –

+0

tuyệt vời, cảm ơn rất nhiều. –

+0

Chỉ là những gì tôi đã tìm kiếm! Cảm ơn!! – andyengle

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