如何点击下载SVG？

Question

我正在尝试从github https://github.com/likr/d3-downloadable处下载这段代码。尽管它工作正常，但我想通过单击按钮使其可下载。我通过点击“ click”尝试了一下，但是它不起作用。

selection.on('click', () => {

      const pos = d3.mouse(document.body)
      SVGConverter.loadFromElement(selection.node()).then((converter) => {
        createMenu(pos, filename, converter)
      })
      d3.event.preventDefault()
    })
  }

有什么主意我可以在按钮内调用它以使其可下载吗？ 下面是完整的代码：

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

const css = `.download-menu {
  position: absolute;
  top: 100%;
  left: 0;
  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: 1px solid rgba(0,0,0,.15);
  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;
}
.download-menu>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: 400;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
  text-decoration: none;
  background: 0 0;
}
.download-menu>li>a:hover, .download-menu>li>a:focus {
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}`

const createMenu = (pos, filename, converter) => {
  const menu = d3.select('body')
    .append('ul')
    .classed('download-menu', true)
    .style('left', `${pos[0]-3}px`)
    .style('top', `${pos[1]-3}px`)
    .on('mouseleave', () => {
      menu.remove()
    })
  const list = menu
    .append('li')
 list
    .append('a')
    .text('Save as SVG')
    .attr('download', filename + '.svg')
    .attr('href', converter.svgDataURL())
  list
    .append('a')
    .text('Save as PNG')
    .attr('download', filename + '.png')
    .attr('href', converter.pngDataURL())
 list
    .append('a')
    .text('Save as JPG')
    .attr('download', filename + '.jpeg')
    .attr('href', converter.jpegDataURL())
}

const downloadable = (name) => {
  alert("OK");
  let filename = name

  const downloadableImpl = (selection) => {

    if (d3.select('#downloadable-css').empty()) {
      d3.select('head')
        .append('style')
        .attr('id', 'downloadable-css')
        .text(css)
    }

    selection.on('contextmenu', () => {

      const pos = d3.mouse(document.body)
      SVGConverter.loadFromElement(selection.node()).then((converter) => {
        createMenu(pos, filename, converter)
      })
      d3.event.preventDefault()
    })
  }

  downloadableImpl.filename = function () {
    if (arguments.length === 0) {
      return filename
    }
    filename = arguments[0]
    return downloadableImpl
  }

  return downloadableImpl
}

exports.downloadable = downloadable