2

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

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

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

我的问题是我不放心将 Javascript 集成到 ipython 笔记本中。

我找到了一些教程：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文件。

有人可以帮我弄这个吗 ？

问候，托马斯

4

0 回答 0