d3.js xuất ra các tệp chất lượng in có độ phân giải cao?

Question

Có cách nào để xuất đồ thị, biểu đồ, bản đồ, vv được tạo bằng html/js dựa trên d3.js sang định dạng dữ liệu khác với chất lượng in ấn xuất bản có độ phân giải cao không?

Đồ họa của các biểu đồ này thật tuyệt vời nhưng sẽ vô ích khi in trên giấy và có độ pixel cao. Tôi đang cố gắng tránh thay thế chúng trong Illustrator cho vectơ hoặc photoshop.

Các định dạng đầu ra mà tôi đang tìm kiếm có thể đọc được với Illustrator hoặc Photoshop. Và tốt nhất là không cần thao tác trực quan nhiều hơn nữa khi được xuất. Nó thực sự sẽ đánh bại mục đích nếu tôi sẽ phải thay thế hoặc đổ đầy màu sắc hoặc rephotoshop nó để có được hiệu quả.

Cảm ơn!

Answer 1

Có nhiều phương pháp phức tạp hơn nhưng cách nhanh chóng, dễ dàng là chỉ sao chép phần tử svg từ DOM (bạn có thể cần bao gồm các tệp css của bạn), dán nó vào một tệp và lưu nó với phần mở rộng. svg. Sau đó bạn có thể mở nó trong trình soạn thảo vectơ.

Ngoài ra còn có các cách để chuyển đổi đầu ra d3.js thành tệp png. Một người nào đó đặt cùng một jsfiddle để làm điều này với canvg tại http://jsfiddle.net/plaliberte/HAXyd/.

Answer 2

Trình duyệt hiện đại hỗ trợ thuộc tính download trên liên kết. Nếu bạn tạo liên kết tới hình ảnh có thuộc tính download, trình duyệt sẽ tải xuống liên kết đó thay vì mở nó trong trình duyệt.

Kể từ khi không có tập tin thực tế để tải về, những gì bạn phải làm là để mã hóa chuỗi svg của bạn như là một dữ liệu-uri, Tất cả bạn phải làm là ...

var download = d3.select("body").append("a").attr("href", "#") 

download.on("click", function(){ 
     d3.select(this) 
     .attr("href", 'data:application/octet-stream;base64,' + btoa(d3.select("#viz").html())) 
     .attr("download", "viz.svg") 
    }) 

Bạn có thể thấy một bản demo tại đây http://bl.ocks.org/3831266 bạn có thể mở tệp đã tải xuống trong trình minh họa mà không gặp bất kỳ sự cố nào.

Tuy nhiên, có một vài dấu hiệu: bạn phải khai báo kiểu nội tuyến (bạn không thể tạo kiểu với biểu định kiểu css bên ngoài).

Một giải pháp nhanh chóng và dơ bẩn là đầu ra mã svg để một hộp cảnh báo:

download.on("click", function(){ 
    alert(d3.select("#viz").html()) 
}); 

Và sao chép các cảnh báo vào một tập tin văn bản và tiết kiệm như svg.

Answer 3

Đối với đồ thị d3 của tôi, các giải pháp được đề xuất không hoạt động tốt. Một số thuộc tính của kết quả xuất SVG (để lấy mẫu của gradient) không được hiển thị chính xác và trông rất khác so với những gì Chrome hiển thị.

Trong trường hợp của tôi hình ảnh tĩnh, do đó, ảnh chụp màn hình có thể là đủ. Tuy nhiên, ảnh chụp màn hình bị giới hạn ở kích thước màn hình bạn đang làm việc. Tuy nhiên, tôi rất vui vì tôi đã tìm thấy giải pháp thay thế, webkit2png: http://www.paulhammond.org/webkit2png/

Công cụ này cho phép tạo ảnh chụp màn hình của trang web khi chúng nhìn trên màn hình có kích thước tùy ý. Nó hoàn hảo cho việc chuyển đổi các đồ thị tĩnh d3. Tôi hy vọng nó có thể giúp một ai đó vì nó đã giúp tôi.

Answer 4

Nếu bạn đang hạnh phúc để lưu vào một hình ảnh raster độ phân giải cao, tôi đã tìm thấy giải pháp tốt nhất là sử dụng Trân Crescent Trang Saver, một addon Firefox:

https://addons.mozilla.org/en-US/firefox/addon/pagesaver/

Phiên bản cơ bản cung cấp cho bạn tùy chọn để chia tỷ lệ hình ảnh - ví dụ chia tỷ lệ thành 200% sẽ tăng độ phân giải của .png lên gấp đôi (gấp 4 lần số pixel) những gì bạn nhận được với một ảnh chụp màn hình đơn giản.

Nếu bạn cần các vectơ, và tải svg trong Illustrator không được làm việc ra cho bạn, bạn có thể thử render một res siêu hi png, sau đó sử dụng Live Trace Illustrator của ...