如何在Google Colab中运行JavaScript图可视化代码并查看生成图表

可直接在Colab运行的完整代码 #

你之前的代码没有效果有三个核心原因：缺少D3依赖、页面没有对应SVG渲染容器、直接运行JS无法挂载渲染元素到输出单元格。你直接新建一个Colab代码单元格，复制下面的代码运行即可，运行前确保你已经把MapperViz.json上传到Colab当前工作目录：

from IPython.display import HTML

html_content = """
<!-- 引入D3库 -->
<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- 渲染用的SVG容器 -->
<svg id="mapperViz" width="800" height="600">
  <g class="links"></g>
  <g class="nodes"></g>
</svg>

<script>
const svg = d3.select("#mapperViz"),
width = +svg.attr("width"),
height = +svg.attr("height");

const simulation = d3.forceSimulation()
  .force('charge', d3.forceManyBody().strength(-10))
  .force('center', d3.forceCenter(width / 2, height / 2))
  .force("link", d3.forceLink().id(function(d) { return d.id; }))

d3.json("mapperViz.json", function(error, network){
  if (error) throw error;
          
  //Force Link Network//
  const scaleRadius = d3.scaleLinear()  
      .domain([0, network.max_weight])
      .range([25,100]);

  const scaleColor = d3.scaleLinear()
      .domain([0, network.rcover[0][0]])
      .range([1,0.2]);

  simulation
      .nodes(network.nodes)
      .on("tick", ticked);

  simulation.force("link")
      .links(network.links);

  function updateLinks() {
    const u = d3.select('.links')
      .selectAll('line')
      .data(network.links)

    u.enter()
      .append('line')
      .merge(u)
      .attr('stroke', '#999')
      .attr('stroke-opacity', 0.6)
      .attr('x1', function(d) {return d.source.x;})
      .attr('y1', function(d) {return d.source.y;})
      .attr('x2', function(d) {return d.target.x;})
      .attr('y2', function(d) {return d.target.y;})

    u.exit().remove()
  }

  function updateNodes() {
    u = d3.select('.nodes')
      .selectAll('circle')
      .data(network.nodes)

    u.enter()
      .append('circle')
      .merge(u)
      .attr('cx', function(d) {return d.x;})
      .attr('cy', function(d) {return d.y;})
      .attr('r',  function (d) {return Math.sqrt(scaleRadius(d.weight));})
      .attr('fill', function(d){ return d3.interpolateReds(scaleColor(d.group))})
      .attr('stroke', '#fff')
      .attr('stroke-width', 1.5)
      .call(d3.drag()
          .on("start", dragstarted)
          .on("drag", dragged)
          .on("end", dragended));

    u.exit().remove()
  }

  function ticked() {
    updateLinks()
    updateNodes()
  }

  function dragstarted(d) {
    if (!d3.event.active) simulation.alphaTarget(0.3).restart();
    d.fx = d.x;
    d.fy = d.y;
  }

  function dragged(d) {
    d.fx = d3.event.x;
    d.fy = d3.event.y;
  }

  function dragended(d) {
    if (!d3.event.active) simulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  }
})
</script>
"""

display(HTML(html_content))

其他运行方案 #

如果你不想在Colab里运行，也可以直接把上面代码中html_content变量里的所有内容复制到一个后缀为.html的文件里，把这个HTML文件和MapperViz.json放在同一个文件夹下，直接用浏览器打开HTML文件就能看到可视化效果。

内容的提问来源于stack exchange，提问作者elenaby