Как загрузить d3. js svg в блокноте Jupyter? - PullRequest
Новая
       18

Как загрузить d3. js svg в блокноте Jupyter?

0 голосов
/ 09 июля 2020

Я создаю визуализацию d3 в блокноте Jupyter и пытаюсь найти способ загрузить визуализацию (элемент svG) как svg. В приведенном ниже коде (это одна ячейка из записной книжки) я пытаюсь следовать руководству , найденному здесь , но на моем рисунке нет ссылки для загрузки. Как я могу загрузить SVG в блокнот Jupyter? 

  def init_chart():
      chart_id = 'mychart-' + str(uuid.uuid4())
      display(HTML('<script src="/static/components/requirejs/require.js">'))
      display(HTML(Template(dedent('''
      <script>
      require.config({
        paths: {
          'd3': 'https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min',
          'd3-hexbin': 'https://d3js.org/d3-hexbin.v0.2.min',
        },
        shim: {
          'd3-hexbin': ['d3']
        }
      })

  define($chart_id, ['d3', 'd3-hexbin'], function(d3, d3_hexbin) {
    return function (figure_id, numA, numB, colorList, libraryList, indices) {
      var margin = {top: 50, right: 20, bottom: 20, left: 50},
        width = 850 - margin.left - margin.right,
        height = 350 - margin.top - margin.bottom;

      // append the svg object to the body of the page
      var svG = d3.select('#' + figure_id)
                  .attr("width", width + margin.left + margin.right)
                  .attr("height", height + margin.top + margin.bottom)
                  .append("g")
                  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
      
     // create svG chart here
      svG.append("g")
        .selectAll(".hexagon")
        // more things here but they aren't important

      // try to download?
      var svgData = svG.outerHTML;
      var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
      var svgUrl = URL.createObjectURL(svgBlob);
      var downloadLink = document.createElement("a");
      downloadLink.href = svgUrl;
      downloadLink.download = "newesttree.svg";
      document.body.appendChild(downloadLink);
      downloadLink.click();
      document.body.removeChild(downloadLink);

  }

  })
  </script>
  ''')).substitute({ 'chart_id': repr(chart_id) })))
  return chart_id

def Chart(numA, numB, colorList, libraryList, indices):
  chart_id = init_chart()
  display(HTML(Template(dedent('''
  <svg id=$figure_id></svg>
  <script>
  require([$chart_id], function(mychart) {
    mychart($figure_id, $numA, $numB, $colorList, $libraryList, $indices)
  })
  </script>
  ''')).substitute({
      'chart_id': repr(chart_id),
      'figure_id': repr('fig-' + str(uuid.uuid4())),
      'numA': repr(numA),
      'numB': repr(numB),
      'colorList': repr(colorList),
      'libraryList': repr(libraryList),
      'indices': repr(indices)
  })))
...