2

OKFN製のバブルツリーを設置したいです。https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation

ここで、いくつかのデータを入力したいと思います。3層深く行きたいです。しかし、何らかの理由で機能しません。これは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 で、誰かが私を助けてくれるなら、それは素晴らしいことです。

4

1 に答える 1

0

発生している問題を特定するために、おそらくフィドルを設定する必要があります。箱から出してすぐに、BubbleTree GitHub リポジトリーにあるデモは確実に機能します。ご提供いただいた情報によると、元のライブラリで既知の問題が発生しているようです。1 つ (または 2 つだけ) の子を持つバブルが正しく機能しないという問題です。

元の問題に関するドキュメントは次のとおりです: 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 ライブラリに関する次の 2 つのチュートリアルを強くお勧めします。

幸運を！

于 2014-06-30T19:12:46.190 に答える