New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

d3-downloadable

Package Overview
Dependencies
Maintainers
1
Versions
6
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

d3-downloadable - npm Package Compare versions

Comparing version

1.0.0
to
2.0.0

README.md

78

index.js
const d3 = require('d3')
const {SVGConverter} = require('svg-dataurl')

@@ -42,39 +43,8 @@ const css = `.download-menu {

const toCanvas = (svgData, width, height, callback) => {
const src = 'data:image/svg+xml;charset=utf-8;base64,' + svgData
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')
const image = new window.Image()
canvas.width = width
canvas.height = height
image.onload = () => {
context.drawImage(image, 0, 0)
callback(canvas)
}
image.src = src
}
const createMenu = (pos, filename, canvas, base64SvgText) => {
const createMenu = (pos, filename, converter) => {
const menu = d3.select('body')
.append('ul')
.classed('download-menu', true)
.style({
left: `${pos[0]}px`,
top: `${pos[1]}px`,
position: 'absolute',
'z-index': '1000',
display: 'inline-block',
float: 'left',
'min-width': '160px',
padding: '5px 0',
margin: '2px 0 0',
'list-style': 'none',
'font-size': '14px',
'background-color': '#fff',
border: '1px solid #ccc',
'border-radius': '4px',
'-webkit-box-shadow': '0 6px 12px rgba(0,0,0,.175)',
'box-shadow': '0 6px 12px rgba(0,0,0,.175)',
'background-clip': 'padding-box'
})
.style('left', `${pos[0]}px`)
.style('top', `${pos[1]}px`)
.on('mouseleave', () => {

@@ -88,20 +58,14 @@ menu.remove()

.text('Save as SVG')
.attr({
download: filename + '.svg',
href: 'data:image/svg+xml;charset=utf-8;base64,' + base64SvgText
})
.attr('download', filename + '.svg')
.attr('href', converter.svgDataURL())
list
.append('a')
.text('Save as PNG')
.attr({
download: filename + '.png',
href: canvas.toDataURL('image/png')
})
.attr('download', filename + '.png')
.attr('href', converter.pngDataURL())
list
.append('a')
.text('Save as JPG')
.attr({
download: filename + '.jpeg',
href: canvas.toDataURL('image/jpeg')
})
.attr('download', filename + '.jpeg')
.attr('href', converter.jpegDataURL())
}

@@ -122,20 +86,4 @@

const pos = d3.mouse(document.body)
const origSvgNode = selection.node()
const {width, height} = origSvgNode.getBoundingClientRect()
const svgNode = origSvgNode.cloneNode(true)
d3.select(svgNode)
.attr({
version: '1.1',
xmlns: 'http://www.w3.org/2000/svg',
'xmlns:xlink': 'http://www.w3.org/1999/xlink',
width: width,
height: height
})
const svgText = svgNode.outerHTML
const base64SvgText = window.btoa(
encodeURIComponent(svgText)
.replace(/%([0-9A-F]{2})/g,
(match, p1) => String.fromCharCode('0x' + p1)))
toCanvas(base64SvgText, width, height, (canvas) => {
createMenu(pos, filename, canvas, base64SvgText)
SVGConverter.loadFromElement(selection.node()).then((converter) => {
createMenu(pos, filename, converter)
})

@@ -157,2 +105,2 @@ d3.event.preventDefault()

module.exports = downloadable
exports.downloadable = downloadable

21

package.json
{
"name": "d3-downloadable",
"version": "1.0.0",
"version": "2.0.0",
"description": "D3.js plugin to make svg downloadable",

@@ -10,3 +10,4 @@ "main": "index.js",

"scripts": {
"build": "webpack",
"example": "webpack-dev-server",
"deploy": "NODE_ENV=production webpack && gh-pages -d example",
"test": "echo \"Error: no test specified\" && exit 1"

@@ -25,10 +26,16 @@ },

"peerDependencies": {
"d3": "^3.5.17"
"d3": "^4.9.1"
},
"devDependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"webpack": "^1.13.1"
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-preset-env": "^1.6.0",
"d3": "^4.9.1",
"gh-pages": "^1.0.0",
"webpack": "^2.6.1",
"webpack-dev-server": "^2.5.1"
},
"dependencies": {
"svg-dataurl": "^1.0.0"
}
}