Question

我的真正目标是将两个列表以图形方式关联在一起。

我想在jupyter / jupyterlab中以交互方式进行操作。

可以在此库中找到一个示例： http://sebastien.drouyer.com/jquery.flowchart-demo/

我的问题是我不愿意将Javascript集成到ipython Notebook中。

我找到了一些教程：http://jacobbridges.github.io/post/jupyter-notebook-with-interactive-charts/

如果我能够重现此示例，则不会尝试用流程图库代替。

第一个单元格

%%javascript
require.config({
  paths: {
    flowcharts: "https://github.com/sdrdis/jquery.flowchart/blob/master/jquery.flowchart.js",
  },
shim: {
    flowcharts: {
      exports: "FlowCharts",
      deps: ["jquery"]
    },
}
});

第二

%%javascript
// Since I append the div later, sometimes there are multiple divs.
$("#example_1").remove();

// Make the cdiv to contain the chart.
element.append('<div id="example_1" style="min-width: 310px; height: 400px; margin: 0 auto"></div>');
var data = {
  operators: {
    operator: {
      top: 20,
      left: 20,
      properties: {
        title: 'Operator',
        inputs: {
          input_1: {
            label: 'Input 1',
          },
          input_2: {
            label: 'Input 2',
          }
        },
        outputs: {
          output_1: {
            label: 'Output 1',
          },
          output_2: {
            label: 'Output 2',
          },
          output_3: {
            label: 'Output 3',
          }
        }
      }
    }
  }
};

// Require highcarts and make the chart.
require(['flowcharts'], function(FlowCharts) {
   $('#example_1').flowchart({
      data: data
    });
});

我也不知道在哪里导入css文件。

有人可以帮我吗？

关于，托马斯

在jupyter / jupyterlab笔记本中使用JavaScript库

0 个答案: