个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我想设置 OKFN 制作的泡泡树。 https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation
现在我想在这里输入一些数据。我想深入三层。但由于某种原因它不起作用。这是 html 文件中的代码
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>Mijn financien</title>
<script type="text/javascript" src="../../lib/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../../lib/jquery.history.js"></script>
<script type="text/javascript" src="../../lib/raphael.js"></script>
<script type="text/javascript" src="../../lib/vis4.js"></script>
<script type="text/javascript" src="../../lib/Tween.js"></script>
<script type="text/javascript" src="../../build/bubbletree.js"></script>
<script type="text/javascript" src="http://assets.openspending.org/openspendingjs/master/lib/aggregator.js"></script>
<link rel="stylesheet" type="text/css" href="../../build/bubbletree.css" />
<script type="text/javascript" src="../../styles/cofog.js"></script>
<script type="text/javascript">
$(function() {
var data = {
label: 'Totaal',
amount: 100,
children: [
{ label: 'Een hele lange zin om te testen hoe dat eruit komt te zien', amount: 10, color: '#D95F02',
children: [
{ label: 'Dingen', amount: 5, color: '#66C2A4' },
{ label: 'Stuff', amount: 5, color: '#B2E2E2' }
] },
{ label: 'Dingen en stuff', amount: 80, color: '#1B9E77',
children: [
{ label: 'Dingen', amount: 30, color: '#66C2A4' },
{ label: 'Stuff', amount: 50, color: '#B2E2E2' }
]
},
{ label: 'Bananen in pyjamas', amount: 10, color: '#7570B3',
children: [
{ label: 'Bananen', amount: 5, color: '#7570B3' },
{ label: 'Pyjamas', amount: 5, color: '#7570B3',
children: [
{ label: 'Dingen', amount: 3, color: '#66C2A4' },
{ label: 'Stuff', amount: 2, color: '#B2E2E2' }
] }
]
}
]
};
new BubbleTree({
data: data,
bubbleType: 'icon',
container: '.bubbletree'
});
});
</script>
</head>
<body>
<div class="bubbletree-wrapper">
<div class="bubbletree"></div>
</div>
</body>
</html>
当我移除最深层时它会起作用，但这还不够。我怎样才能使它工作？
我知道还有一种方法可以使这种可视化与 JSON 一起工作，但我真的不明白这个逻辑。如果这是 B 计划并且有人可以帮助我，那就太好了。
最佳答案
您可能想要设置一个 fiddle ，以确定您遇到的问题。开箱即用，BubbleTree GitHub 存储库中的演示绝对有效。根据您提供的信息，听起来您遇到了原始库的一个已知问题，即只有一个(或只有两个)子级的气泡无法正常工作。
这是关于原始问题的文档: https://github.com/okfn/bubbletree/issues/15
您需要用更好的代码替换损坏的代码。在原始文件中，它位于第 521 行。替换此...
rad2 = 0 - Math.max(
//hw *0.8 - tgtScale * (a2rad(node.parent.amount)+a2rad(node.amount)), // maximum visible part
hw * 0.8 - tgtScale * (a2rad(node.parent.amount) + a2rad(Math.max(node.amount*1.15 + node.maxChildAmount*1.15, node.left.amount * 0.85, node.right.amount * 0.85))),
tgtScale*a2rad(node.parent.amount)*-1 + hw*0.15 // minimum visible part
) + hw;
...有了这个...
rad2 = 0 - Math.max(
hw * 0.8 - tgtScale * (a2rad(node.parent.amount) + a2rad(Math.max(node.amount*1.15 + node.maxChildAmount*1.15, (node.left ? node.left.amount : 0) * 0.85, (node.right ? node.right.amount : 0) * 0.85))),
tgtScale*a2rad(node.parent.amount)*-1 + hw*0.15 // minimum visible part
) + hw;
这肯定会让您更近一步。您的代码可能还有其他问题，但我可以根据个人经验告诉您，我在开箱即用的实现方面没有任何其他问题(目前)。
我强烈推荐以下两个关于 BubbleTree.JS 库的教程:
祝你好运!
关于javascript - OKFN Bubble Tree中的数据输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11842207/
25
4
0
我使用以下语句对句子进行了分块: grammar = '''
在空间索引方面更喜欢 R+-Tree 而不是 R-Tree 的主要原因是什么？据我所知，R+-Tree 避免节点重叠导致更复杂的代码、更复杂的除法算法等。 R*-tree 与 R-tree 非常相似，
我有这个通用树实现，但在编写递归树比较时遇到此错误。在第 89 行，我收到此错误:没有用于调用“Tree::operator==(Tree&, Tree&) const”的匹配函数这是我的代码: #i
除了 GIS 应用程序，还有哪些其他应用程序或库使用 R 树及其变体？ 最佳答案 电脑游戏经常如此。 Here's a link to something cool . 计算机图形学——包括软件和硬件
我正在使用名为 collective.virtualtreecategories 的附加产品在 plone 中生成一棵树。但是，我不断收到奇怪的 javascript 错误，无法显示树。 在我的浏览器
我必须检查一个节点是否属于 lisp 中的一棵树，但我不知道为什么它不起作用。 这是我的代码: (defun number-of-elems (l) (cond ((null l) 0)
我对以下树的术语感到困惑，我一直在研究树，但无法区分这些树: a) 完全二叉树 b) 严格二叉树 c) 完整二叉树 请帮我区分这些树。这些树何时何地在数据结构中使用？ 最佳答案 完美的树:
我在应用程序的多个页面上使用相同的 dijit.Tree View ，并且我希望将 cookie 保存为服务器名称，而不是文件夹名称。 现在我有 3 个页面和 3 个 cookie，每个页面都有自己的
我想知道是否有一个现有的单词来描述我当前正在使用的流程。我想称之为“压扁一棵树”，但我觉得一定有更好的词或短语。 输入: |--D --B | |--C | A-E | | |--G --F
我正在尝试理解 nltk.tree 模块。我很困惑为什么当打印 nltk.tree.Tree 对象时，它不打印出地址。相反，它打印出树的字符串表示形式。 我查看了 nltk.tree 中的源代码，但我
我想构建 2 个树结构。第一个树将包含节点，每个节点都有我的 Range 对象的列表: class Range { public DateTime Start { get; set; }
有人有一个带有图标和来自服务的数据源的 mat-tree 示例吗？ Stackblitz 上的一个例子会很棒。 最佳答案 使用 https://stackblitz.com/edit/ng-mat-t
我意识到答案可能是存在多个有效的此类实例(例如整数；总和、乘积……的情况)。也许有人有比这更令人满意的答案？ 正如 Joachim Breitner 在此答案中出色地解释的那样 How do you
我在 powerbuilder 中使用树数据窗口。这代表了树和表的混合。 我的问题是:树没有明显区分可扩展和不可扩展节点。如果一个节点不可展开，该节点前面的图标仍然是加号，如果我点击加号，树会在当前节
下午好! 我有决策树的问题。 f11<-as.factor(Z24train$f1) fit_f1 <- rpart(f11~TSU+TSL+TW+TP,data = Z24train,method=
对于处理语言，如在常规字典单词中，阅读速度更快，是基数树还是常规 b 树？有没有更快的方法，例如带有桶和散列的字典？ 最佳答案 与往常一样，您需要在应用程序上下文中进行基准测试才能确定。 但是，我希望
我正在使用 Doctrine's 2 Tree-Nestedset extension使用 MySQL IndoDB 数据库。 yml 表架构如下所示: Ext\Entity\PageElement:
我正在尝试在我的光线追踪器中遍历 3D KD 树。树是正确的，但我的遍历算法似乎有问题，因为与使用蛮力方法相比，我遇到了一些错误(一些小表面积似乎被忽略了)。 注意:所讨论的光线都不平行于任何轴。 这
我正在使用nltk.tree.Tree来读取基于选区的解析树。我需要找到从树中的一个特定单词到另一个单词所需移动的节点路径。 一个简单的例子: 这是句子“saw the dogs”的解析树: (VP
我正在研究为我的应用程序组合自定义存储方案的可能性。我认为，重新发明轮子的努力是值得的，因为性能和存储效率都是主要目标，并且其上的数据和操作比 RDBMS 提供的所有内容(无更新、无删除、预定义查询集
我是一名优秀的程序员,十分优秀！