d3.js tạo các đối tượng trên đầu trang của mỗi khác

Question

tôi tạo hình chữ nhật trong phần tử SVG tôi sử dụng mã này:

var rectangles = svg.selectAll("rect") 
     .data(dataset) 
     .enter() 
     .append("rect"); 

    rectangles.attr("x", function (d) { 
      return xScale(getDate(d)); 
      //return xScale(d.start); 
     }) 
     .attr("y", function (d, i) { 
      return (i * 33); 
     }) 
     .attr("height", 30) 
     .transition() 
     .duration(1000) 
     .attr("width", function (d) { 
      return d.length; 
     }) 
     .attr("rx", 5) 
     .attr("ry", 5) 
     .attr("class", "rectangle") 
     .attr("onclick", function (d) { 
      return "runaction(" + d.start + ")"; 
     }); 

Làm thế nào tôi có thể tạo ra hình chữ nhật mới trên đầu trang của những người trước đó?

Answer 1

Đây là câu trả lời cho câu hỏi này tôi nhận được từ Scott Murray, tác giả của hướng dẫn giới thiệu tuyệt vời cho d3.js http://alignedleft.com/tutorials/d3/ đã giúp tôi rất nhiều với sự hiểu biết chức năng của nó. Tôi hy vọng anh ấy sẽ không nhớ tôi đưa câu trả lời của mình ở đây vì lợi ích của mọi người.

Cảm ơn bạn rất nhiều Scott!

Và có, điều đó hoàn toàn có thể. Lấy ví dụ của bạn, giả sử bạn muốn vẽ một tập hợp các vòng kết nối có tập dữ liệu được gọi là "giraffeData" được liên kết với chúng. Bạn sẽ sử dụng:

svg.selectAll("circle") 
    .data(giraffeData) 
    .enter() 
    .append("circle"); 

Nhưng sau đó bạn có tập dữ liệu thứ hai (thực sự chỉ là một mảng giá trị) được gọi là "zebraData". Vì vậy, bạn có thể sử dụng mã tương tự, nhưng thay đổi mà tập dữ liệu bạn tham khảo ở đây:

svg.selectAll("circle") 
    .data(zebraData) 
    .enter() 
    .append("circle"); 

Tất nhiên, điều này vô tình sẽ chọn tất cả các vòng tròn bạn đã tạo và ràng buộc dữ liệu mới cho họ - đó là không thực sự bạn muốn gì. Vì vậy, bạn sẽ phải giúp D3 phân biệt giữa các vòng tròn con hươu cao cổ và các vòng tròn ngựa vằn. Bạn có thể làm điều đó bằng cách gán cho họ các lớp:

svg.selectAll("circle.giraffe") 
    .data(giraffeData) 
    .enter() 
    .append("circle") 
    .attr("class", "giraffe"); 

svg.selectAll("circle.zebra") 
    .data(zebraData) 
    .enter() 
    .append("circle") 
    .attr("class", "zebra"); 

Hoặc, bạn có thể nhóm các vòng tròn của từng loại thành một SVG riêng 'g' yếu tố:

var giraffes = svg.append("g") 
       .attr("class", "giraffe"); 

giraffes.selectAll("circle") 
    .data(giraffeData) 
    .enter() 
    .append("circle"); 

var zebras = svg.append("g") 
       .attr("class", "zebra"); 

zebras.selectAll("circle") 
    .data(zebraData) 
    .enter() 
    .append("circle"); 

Tôi muốn có thể chọn thứ hai, khi đó, DOM của bạn được tổ chức gọn gàng hơn và bạn không phải thêm lớp học vào mọi vòng kết nối. Bạn chỉ có thể biết rằng bất kỳ vòng tròn bên trong g với lớp ngựa vằn là một "vòng tròn ngựa vằn".