使用assembly-stats工具仅显示环形图，无法生成表格的问题求助

Let's dig into why your table isn't rendering—even though the circular plot works, there are a few common issues we can check:

1. CSS Links Are in the Wrong Place #

Your <link> tags for stylesheets are sitting inside the <body> section, but browsers expect these to be in the <head> to load styles properly before rendering content. This could be preventing the table's CSS from applying, making it invisible even if it's generated.

Fix your HTML structure to move the styles to the head:

<html>
<head>
  <title>assembly stats</title>
  <link rel="stylesheet" type="text/css" href="css/circle-plot.css">
  <link rel="stylesheet" type="text/css" href="css/square-plot.css">
  <link rel="stylesheet" type="text/css" href="css/table.css">
</head>
<body>
  <!-- Rest of your body content here -->
</body>
</html>

2. You're Using a Class Instead of an ID for the Table Container #

Looking at how you call asm.drawPlot('assembly_stats')—you're targeting an element by its ID. It's almost certain that asm.drawTable() expects an ID too, but you're passing 'my_class' while your container uses class="my_class".

Update your container and method call to use an ID:

<!-- Replace class with id -->
<div id="assembly_table"></div>

<!-- Update the script call -->
asm.drawTable('assembly_table');

3. Your Table Container Is Nested Inside the Plot Container #

You’ve put the table container inside <div id="assembly_stats">, which is the target for drawPlot. Many plotting libraries clear the target container’s content when rendering, which would erase your table container before drawTable can use it.

Move the table container outside the plot container:

<div id="assembly_stats"></div>
<!-- Table container is now separate -->
<div id="assembly_table"></div>

4. Check the Browser Console for Errors #

Open your browser’s Developer Tools (press F12, then go to the Console tab) to spot any obvious issues:

• Is table.js loading correctly? Look for 404 errors indicating the file path is wrong.
• Do you see an error like asm.drawTable is not a function? That means the table script failed to load.
• Are there any JSON parsing errors? (Unlikely here, since your plot works, but worth checking anyway)

5. Double-Check Your JSON Filename #

You mentioned generating myoutput.json with your Perl script, but your code loads output_0035.json. Since the plot renders, this probably isn’t the issue—but it’s good to confirm the filename matches just in case.

Fixed Full HTML Example #

After applying these changes, your code should look like this:

<html>
<head>
  <title>assembly stats</title>
  <link rel="stylesheet" type="text/css" href="css/circle-plot.css">
  <link rel="stylesheet" type="text/css" href="css/square-plot.css">
  <link rel="stylesheet" type="text/css" href="css/table.css">
</head>
<body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
  <script type="text/javascript" src="js/circle-plot.js"></script>
  <script type="text/javascript" src="js/square-plot.js"></script>
  <script type="text/javascript" src="js/table.js"></script>

  <div id="assembly_stats"></div>
  <div id="assembly_table"></div>

  <script>
    d3.json("output_0035.json", function(error, json) {
      if (error) return console.warn(error);
      asm = new Assembly(json);
      asm.drawPlot('assembly_stats');
      asm.drawTable('assembly_table');
      asm.toggleVisible(['asm-longest_pie','asm-count']);
    })
  </script>
</body>
</html>

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