个人中心
文章发布
退出
作者热门文章
- 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
我正在使用带有气泡的 D3 和 DataMaps。我想在有人点击气泡时添加自定义操作。这些操作需要传递气泡的属性，例如气泡的名称。 如何将气泡的名称传递到该气泡的点击事件中？ map.svg.sele
我有一个 d3 脚本，其中包含以下格式的数据: var data = [{name: "A", rank: 0, student_percentile: 100.0, adm
冒泡排序基本介绍 冒泡排序(Bubble Sorting)的基本思想是通过对待排序序列从前向后（从下表较小的元素开始），以此比较相邻元素的值，若发现逆序则交换，使值较大的元素逐渐从前向后部，就像水底下
冒泡排序基本介绍 冒泡排序(Bubble Sorting)的基本思想是通过对待排序序列从前向后（从下表较小的元素开始），以此比较相邻元素的值，若发现逆序则交换，使值较大的元素逐渐从前向后部，就像水底下
我没有阅读太多关于它的内容，但是下面链接中的作者建议我不要使用“冒泡”来集中 VBA 中的错误处理。 Excel Programming Weekend Crash Course via Google
这是我的冒泡排序代码，但我很困惑为什么输出仅显示 125。 int secondArray[] = {0, 1, 5, 2}; int num; for (int i = 1; i secondAr
我不确定这是一个传播问题还是一个设计缺陷，我读到过传播问题都是泡沫，但它就在这里。我有一个表格编辑网格。 每个单元格包含两个主要 block :编辑 div(包含用于编辑显示值的表单)和查看 div(
这个问题在这里已经有了答案: jquery stop child triggering parent event (7 个答案) 关闭 8 年前。 我不确定这是否真的冒泡，我会解释。 我有这个:
我想知道是否可以在 Swing 中制作类似于 StackOverflow 上的标签输入系统的东西(可能使用 JTextField)。 最佳答案 您可以重新定义自己的类来扩展 JTextField 类并
public static void sortByNumber(Course[] list) { Course temp = new Course(); boolean fixed =
在我的事件处理函数中，我需要检查某些字段是否是唯一的。为了实现这一点，我在后端使用 ajax 调用函数。 使用回调从该函数发回数据。此时我有事件处理程序: self.searchKeyboardCmd
我想设置 OKFN 制作的泡泡树。 https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation 现在我想在这里输入一些数据。我想
我想创建气泡，就像 iPhone 上的邮件应用程序一样。但是大量气泡(> 10)会大大减慢 View 的滚动速度。 关于我的实现的几句话:我创建自定义 View 并在其上添加“气泡”。以下是我创建每个
我目前正在开发一个 Web 应用程序，并尝试使用 QuillJS 作为所见即所得编辑器。我正在尝试使用“Bubble”主题，因为它与我的网络应用程序的其余部分非常适合，但是当工具提示应该出现时，它并没
main方法创建一个随机整数数组，然后调用升序和降序方法对数组进行排序。似乎当我调用升序和降序方法时，它会改变原始数组的值。打印时收到的输出是三个数组，全部按降序排序。 public static v
对于下面的 facebook 点赞按钮，按钮右侧有一个# of likes 气泡(？)(见下文 - 气泡上带有“3.5k”的文本) 问题是——它是用 css 绘制的吗？如何创建？ 最佳答案 fiddl
如果字符串很长，则必须转到下一行。我该怎么做？ Demo HTML Body 01-10 03:29：
给定冒泡排序算法: Algorithm BubbleSort(A[0...n]): for i <- 0 to n-2 do for j <- 0 to n-2-i do if
这个问题在这里已经有了答案: Is it possible for the child of a div set to pointer-events: none to have pointer ev
我正在尝试获取通知以在 MFC 应用程序中弹出类似这些气泡的内容: (来源:humanized.com) 我目前正在用 C# 制作一个界面模型，以向一些利益相关者展示，所以最好也有它。 它不一定非得是
我是一名优秀的程序员,十分优秀！