Light

d3plus / d3plus-export Goto Github PK

View Code? Open in Web Editor NEW

1.0 5.0 1.0 650 KB

Export methods for transforming and downloading SVG

License: MIT License

JavaScript 100.00%

d3plus-export's Introduction

d3plus-export

Export methods for transforming and downloading SVG.

Installing

If using npm, npm install d3plus-export. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus-export";

d3plus-export can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus-export@1"></script>
<script>
  console.log(d3plus);
</script>

Examples

Live examples can be found on d3plus.org, which includes a collection of example visualizations using d3plus-react. These examples are powered by the d3plus-storybook repo, and PRs are always welcome. 🍻

API Reference

saveElement - Downloads an HTML Element as a bitmap PNG image.

d3plus.saveElement(elem, [options], [renderOptions]) <>

Downloads an HTML Element as a bitmap PNG image.

This is a global function.

Param	Type	Default	Description
elem	`HTMLElement`		A single element to be saved to one file.
[options]	`Object`		Additional options to specify.
[options.filename]	`String`	`"download"`	Filename for the downloaded file, without the extension.
[options.type]	`String`	`"png"`	File type of the saved document. Accepted values are `"png"` and `"jpg"`.
[options.callback]	`function`		Function to be invoked after saving is complete.
[renderOptions]	`Object`		Custom options to be passed to the html-to-image function.

_{Documentation generated on Tue, 04 Apr 2023 21:45:19 GMT}

d3plus-export's People

Contributors

Stargazers

Watchers

Forkers

d3plus-export's Issues

create example showing usage of saveElement

Update `xmldom` dependency

xmldom and canvg-browser currently have vulnerability warnings:

xmldom  *
Severity: moderate
Misinterpretation of malicious XML input - https://github.com/advisories/GHSA-5fg8-2547-mr8q
Misinterpretation of malicious XML input - https://github.com/advisories/GHSA-h6q6-9hqw-rwfv
No fix available
node_modules/xmldom
  canvg-browser  *
  Depends on vulnerable versions of xmldom
  node_modules/canvg-browser
    d3plus-export  *
    Depends on vulnerable versions of canvg-browser
    node_modules/d3plus-export

3 vulnerabilities (2 low, 1 moderate)

Some issues need review, and may require choosing
a different dependency.

Can these dependencies be updated?

network downloads are not working

geomap tiles not aligning properly in download

Hello,

I've created a Geomap and I activated the option to download it (http://jsfiddle.net/ranucame/wtquj2yk/2/), the problem is when you download it, the background map doesn't fit with the geomap, how could fix it?

Thanks

missing legend icons in images exported in PNG format

When you export a visualization as a PNG, the legend icons are removed.

escape characters in aria-labels for SVG parsing

The following text, applied by the thresholding function of a Treemap, causes SVG exports to not pass basic XML parsing:

aria-label="120. Values < 0.01%, 590215673306.6093."

axis ticks / labels not appearing in saved viz images

When you save the image for "Age Distribution by Gender" at http://cny-bullfrog.datawheel.us/profile/syracuse#PopDistribution the axis labels/ticks do not appear

See also related issue

when saving a line chart, black fill areas appear in downloaded image

see this example: https://jsfiddle.net/8cekfkhg/1/ (try clicking save)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.