OKFN泡泡樹中的數據輸入

我想設置OKFN泡泡樹。 https://github.com/okfn/bubbletree/wiki/Bubble-Tree-Documentation 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>

它在我移除最深層時起作用，但這還不夠。我該如何做這項工作？

我知道還有一種方法可以使這種可視化工作與JSON，但我真的不明白這個邏輯。如果這是B計劃，有人可以幫助我，那會很棒。

來源

2012-08-07 Jerry Vermanen

您可能會想要設置一個小提琴，以確定您遇到的問題。開箱即用，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庫中的以下兩個教程：

祝你好運！

來源

2014-06-30 19:12:46 Crates

OKFN泡泡樹中的數據輸入

回答

相關問題