d3.js Nhận chú giải bên ngoài biểu đồ

Question

Tôi đang cố gắng truyền tải biểu đồ của mình bên ngoài khu vực biểu đồ.

Sau đây là các lề:

var margin = {top: 50, right: 200, bottom: 50, left: 40}; 
     var width = 960 - margin.left - margin.right, 
      height = 500 - margin.top - margin.bottom; 

Trước tiên tôi tạo ra svg:

var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom) 
      .append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

Vì vậy, từ sự hiểu biết của tôi, tôi bây giờ có các yếu tố svg vải và ag bên trong của nó mà giữ đồ thị. Tôi đang cố gắng để thêm nhiều hơn vào lề bên phải, vì vậy tôi có thể nhận được một số không gian giữa vải svg và g nối thêm vào nó, giữ biểu đồ. Sau đó, tôi muốn đặt huyền thoại của mình vào khoảng trống đó.

Đây là nơi tôi thêm huyền thoại của tôi:

//add legend 
      var legend = svg.append("g") 
       .attr("class", "legend") 
       .attr("height", 300) 
       .attr("width", 200) 
       .attr("transform", "translate(-1000,50"); 

Mặc dù tôi đang phụ thêm vào các yếu tố SVG, nó được gắn thêm vào g bên trong phần tử svg. Vì vậy, không có vấn đề bao nhiêu tôi dịch nó hoặc cố gắng để có được nó để đi nhiều hơn ngay trên màn hình, nó không bao giờ đi qua chiều rộng của g bên trong.

Khi khắc phục sự cố, tôi thấy rằng phần tử SVG bên ngoài có chiều cao là 960 và chiều rộng là 500. G được nối thêm vào đó có chuyển đổi/dịch là 40,50. Chiều rộng kết thúc lên là 839px bởi 433.223px (không chắc chắn tôi hiểu điều này). Các svg bên ngoài có một bó của không gian ngay bây giờ vì các biên được xây dựng trong.

Vì vậy, tôi đang cố gắng để tăng chiều rộng của g nối vào svg vì vậy tôi có thể đặt huyền thoại của tôi như một đứa trẻ của g và di chuyển nó đến không gian trống được tạo ra bởi lề. Hoặc, tôi đang cố gắng tạo một g khác là anh chị em cho g đầu tiên và sau đó tôi có thể sử dụng khoảng trống được tạo bởi lề.

Tôi không thể làm việc và không biết cách nào là tốt nhất.

Answer 1

Chú ý rằng var svg đang được gán cho một <g> lồng bên trong <svg>

svg = d3.select("body").append("svg") 
     .attr("width", width + margin.left + margin.right) 
     .attr("height", height + margin.top + margin.bottom) 
     .append("g") // <-- This is what svg is currently being assigned to 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

Và như vậy, sau này khi bạn thực hiện var legend = svg.append("g"), bạn đang thực sự phụ thêm huyền thoại như một đứa trẻ của nói trên <g>. Và đó là những gì bạn mô tả nhìn thấy trong các công cụ dev.

Một ý nghĩa là translate() biến bạn áp dụng cho bên ngoài <g> ảnh hưởng đến khu vực nội <g> (ví dụ: bản dịch của innter <g> của legend được thêm vào của bên ngoài <g>).

Hẳn bạn muốn chia mọi thứ lên như vậy:

var svg = d3.select("body").append("svg") 
      .attr("width", width + margin.left + margin.right) 
      .attr("height", height + margin.top + margin.bottom); 

var inner = svg.append("g") 
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

Sau đó thay đổi mã của bạn để vẽ biểu đồ có sẵn vào inner hơn svg.

Kết quả là, var legend = svg.append("g") sẽ nối huyền thoại như anh chị em ruột của inner, và bất kỳ dịch bạn áp dụng đối với legend sẽ là tương đối so với của svg trên bên trái (như trái ngược với trên bên trái inner 's, được dịch bởi margin)

Và khả năng bạn muốn dịch legend như vậy:

var legend = svg.append("g") 
       .attr("transform", "translate(" + width - margin.right + "," + margin.top + ")"); 

Đó di chuyển các huyền thoại đến cuối bên phải của biểu đồ, TRỪ margin.right. Bằng cách đó, bạn có thể tinh chỉnh margin.right để tạo đủ chỗ cho legend.

Cuối cùng, lưu ý rằng gọi

legend 
    .attr("height", 300) 
    .attr("width", 200) 

không làm gì cả, bởi vì đối với svg <g>, không có một cách để thiết lập một cách rõ ràng chiều rộng và chiều cao. Tuy nhiên, những thứ đó không có ý nghĩa gì nhiều, bởi vì svg không có một hành vi "chảy" của các bố cục html. Chiều rộng và chiều cao được hiển thị trong công cụ dev là giới hạn tiềm ẩn phát sinh từ giới hạn của trẻ em trong số <g>. (Nếu cần, có cách để nhận các giới hạn được tính toán đó trong javascript, sử dụng hàm getBBox()).

Answer 2

bằng cách nhìn vào mã mà bạn cung cấp, bạn đang thực sự gắn var huyền thoại vào nhóm "g" của bạn, thay vì "svg",
var legend = svg.append("g")

trong dòng này bạn đang nói d3 để có được biến huyền thoại của bạn để "g", đó là gắn liền với các svg, nếu tôi hiểu đúng bạn nên thử một cái gì đó như thế này:

var legend = svg.selectAll(".legend") 
.enter().append("g") 

để tạo ra một nhóm "g" cho huyền thoại của bạn. tôi xin lỗi vì tiếng anh xấu của tôi.