OKFN气泡树中的数据输入
Data input in OKFN Bubble Tree
我想设置由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计划,有人能帮助我,那就太好了。
为了确定您遇到的问题,您可能需要设置一个小提琴。开箱即用,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库的教程:
- http://fedossov.de/bubbltree-js-tutorial-simple-working-example/
- http://vis4.net/blog/posts/tutorial-bubble-tree/
祝你好运!
相关文章:
- 将数据输入到draggable无法工作
- 带有数据输入的PHP/JavaScript web交互式图谱
- 在d3.json中使用d3.csv组合多个csv文件数据输入的最佳方法是什么
- 将iPhone位置数据输入谷歌地图
- 在javascript中测量websockets数据输入/输出的大小
- OKFN气泡树中的数据输入
- 使用setTimeout可以在进行数据输入时推迟时间密集型处理
- 当用户将数据输入表单时要知道的事件
- d3,数据.输入,不同的组
- 如何将应用程序的数据输入语言限制为英语(或拉丁字母)
- Google Charts Javascript,使用两个数组作为折线图的数据输入
- 在角度材料对话框数据输入/推送后更新ng-repeat
- 在 Angular 2 / TypeScript 中使用数据输入的 pdfMake
- PHP 看不到来自 javascript ajax FormData 的数据(输入类型文件)
- 如何将数据输入到 Javascript 以进行客户端处理
- 单击时将数据输入文本框
- 在vba的javascript弹出窗口中将数据输入txtfield
- 在firefox中,将数据输入到充当单选按钮的文本框中需要双击
- javascript 101:增值税计算器不响应数据输入
- 将数据输入和下拉选择组合到js中