时间戳

首页 > 解决方案 > 未捕获的 FoamTree：元素的维度为零：522 x 0

javascript - 未捕获的 FoamTree：元素的维度为零：522 x 0

问题描述

if (CarrotSearchFoamTree.supported) {
  var foamtree = new CarrotSearchFoamTree({
    id: "visualization",
    dataObject: {
      groups: [
        { id: "1", label: "Group 1", groups: [
          { id: "1.1", label: "Group 1.1" },
          { id: "1.2", label: "Group 1.2" }
        ]},
        { id: "2", label: "Group 2", groups: [
          { id: "2.1", label: "Group 2.1" },
          { id: "2.2", label: "Group 2.2" }
        ]},
        { id: "3", label: "Group 3", groups: [
          { id: "3.1", label: "Group 3.1" },
          { id: "3.2", label: "Group 3.2" }
        ]},
        { id: "4", label: "Group 4", groups: [
          { id: "4.1", label: "Group 4.1" },
          { id: "4.2", label: "Group 4.2" }
        ]},
        { id: "5", label: "Group 5", groups: [
          { id: "5.1", label: "Group 5.1" },
          { id: "5.2", label: "Group 5.2" }
        ]}
      ]
    }
  });
} else {
  console.log("Visualization not supported.");
}

carrotsearch.foamtree.js 中的胡萝卜搜索问题：未捕获的 FoamTree：元素的维度为零：522 x 0。这是胡萝卜搜索的示例代码，任何帮助将不胜感激

标签： javascriptjquery

解决方案

您需要定义一个应该嵌入 FoamTree 的 HTML 元素。元素必须具有非零维度。

见例子：

<html>
<body>
<div id="visualization" style="width: 800px; height: 600px"></div>
<script src="https://get.carrotsearch.com/foamtree/demo/carrotsearch.foamtree.js"> 
</script>
<script>
  window.addEventListener("load", function() {
    var foamtree = new CarrotSearchFoamTree({
      id: "visualization",
      dataObject: {
        groups: [
          { label: "Your", weight: 1.0 },
          { label: "First", weight: 3.0 },
          { label: "FoamTree", weight: 2.0 },
          { label: "Visualization", weight: 4.0 }
        ]
      }
    });
  });
</script>

推荐阅读