Javascript OKFN气泡树中的数据输入_Javascript_Data Visualization_Bubble Chart

Javascript OKFN气泡树中的数据输入

javascript

Javascript OKFN气泡树中的数据输入,javascript,data-visualization,bubble-chart,Javascript,Data Visualization,Bubble Chart,我想建立一个泡泡树，由OKFN制作现在我想在这里输入一些数据。我想深入三层。但由于某些原因，它不起作用。这是html文件中的代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"/> <title>Mijn financien</title> <script type

我想建立一个泡泡树，由OKFN制作

现在我想在这里输入一些数据。我想深入三层。但由于某些原因，它不起作用。这是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>


金融家
$（函数（）{
风险值数据={
标签：“Totaal”，
金额：100，
儿童：[
{标签：'Een hele lange zin om te testen hoe dat eruit komt te zien'，数量：10，颜色：'D95F02'，
儿童：[
{标签：'Dingen'，数量：5，颜色：'#66C2A4'}，
{标签：'Stuff'，数量：5，颜色：'#B2E2E2'}
] },
{标签：'Dingen stuff'，数量：80，颜色：'#1B9E77'，
儿童：[
{标签：'Dingen'，数量：30，颜色：'#66C2A4'}，
{标签：'Stuff'，数量：50，颜色：'#B2E2E2'}
]
},
{label:'睡衣中的Bananen'，金额：10，颜色：'\7570B3'，
儿童：[
{标签：'Bananen'，数量：5，颜色：'#7570B3'}，
{标签：'睡衣'，数量：5，颜色：'#7570B3'，
儿童：[
{标签：'Dingen'，数量：3，颜色：'#66C2A4'}，
{标签：'Stuff'，数量：2，颜色：'#B2E2E2'}
] }
]
}
]
};
新泡泡树({
数据：数据，
泡泡类型：“图标”，
容器：'.bubbletree'
});
});

当我移除最深的一层时，它会起作用，但这还不够。我怎样才能做到这一点

我知道还有一种方法可以让这种可视化与JSON一起工作，但我真的不理解这种逻辑。如果这是B计划，有人能帮我，那就太好了。

你可能会想摆弄摆弄，以确定你遇到的问题。在BubbleTree GitHub存储库中找到的演示绝对有效。根据您提供的信息，听起来您在原始库中遇到了一个已知的问题，即单个（或只有两个）孩子的气泡无法正常工作

以下是原始版本的文档：

您将希望用更好的代码替换损坏的代码。在原始文件中，它位于第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库的以下两个教程：

祝你好运

你可能会想摆弄一把小提琴，以确定你遇到的问题。在BubbleTree GitHub存储库中找到的演示绝对有效。根据您提供的信息，听起来您在原始库中遇到了一个已知的问题，即单个（或只有两个）孩子的气泡无法正常工作