重寫D3漏斗圖的默認

Question

我使用下面的鏈接，以創建一個漏斗圖與D3： jakezatecky/d3-funnel

的代碼工作正常。 現在，因爲它在教程中說，我要塊高度正比於自己的體重，所以我需要改變D3 deafult有：

D3Funnel.defaults.block.dynamicHeight = true; 

，但是當我添加tihs一行到我的代碼整個圖表將消失。

您是否應該幫我找出問題所在？ 代碼：

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="https://cdn.rawgit.com/jakezatecky/d3-funnel/0.3.2/d3-funnel.js?1"></script> 

<input class="btn btn-primary" type="submit" id="submit_btn" value="Create Chart"> 
<br><br> 
<div id="funnelPanel"> 
    <div id="funnelContainer"> 
     <div id="funnel"></div> 
    </div> 
</div> 

<script> 
    var data = [ 
     ["Clicked", "5,000"], 
     ["Joined", "2,500"], 
     ["Shared", "50"] 
    ]; 

    width = $('#funnelPanel').width(); 

    var options = { 
     width: width - 300, 
     height: 400, 
     bottomPct: 1/4, 
     dynamicHeight: true, 
     fillType: "solid", // Either "solid" or "gradient" 
     hoverEffects: true // Whether the funnel has effects on hover 
    }; 

    D3Funnel.defaults.block.dynamicHeight = true; 

    var funnel = new D3Funnel(data, options); 
    funnel.draw("#funnelContainer"); 

    $(window).on("resize", function() { 
     var width = $("#funnelPanel").width(); 
     options.width = width; 
     var funnel = new D3Funnel(data, options); 
     funnel.draw('#funnelContainer'); 
    }); 
    $('#submit_btn').on('click', function() { 
     var changed_data = [ 
      ["clicked", "3000"], 
      ["joined", "70"], 
      ["shared", "10"] 
     ]; 
     var funnel = new D3Funnel(changed_data, options); 
     funnel.draw('#funnelContainer'); 
    }); 
</script> 

Answer 1

安塔爾貝葉是正確的，你正在使用過時的版本庫，但他的答案是不完全正確根據最新的文件。您正在使用：

https://cdn.rawgit.com/jakezatecky/d3-funnel/0.3.2/d3-funnel.js

最新的版本是這樣的：

https://cdn.rawgit.com/jakezatecky/d3-funnel/v0.7.0/d3-funnel.js

根據最新的文檔，你會建造你的頁面，如下所示：

<script src="//code.jquery.com/jquery-2.1.3.min.js"></script> 
<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="http://cdn.rawgit.com/jakezatecky/d3-funnel/v0.7.0/dist/d3-funnel.js"></script> 

<input class="btn btn-primary" type="submit" id="submit_btn" value="Create Chart"> 
<br><br> 
<div id="funnelPanel"> 
    <div id="funnelContainer"> 
     <div id="funnel"></div> 
    </div> 
</div> 

<script> 
    var data = [ 
     ["Clicked", 5000], 
     ["Joined", 2500], 
     ["Shared", 50], 
    ]; 

    width = $('#funnelPanel').width(); 

    var options = { 
     chart: { 
      width: width - 300, 
      height: 400, 
      bottomWidth: 1/4, 
     }, 
     block: { 
      dynamicHeight: true, 
      fillType: "solid", 
      hoverEffects: true, 
     }, 
    }; 

    var funnel = new D3Funnel("#funnelContainer"); 
    funnel.draw(data, options); 

    $(window).on("resize", function() { 
     var width = $("#funnelPanel").width(); 
     options.width = width; 

     funnel.draw(data, options); 
    }); 

    $('#submit_btn').on('click', function() { 
     var changed_data = [ 
      ["clicked", 3000], 
      ["joined", 70], 
      ["shared", 10], 
     ]; 

     funnel.draw(changed_data, options); 
    }); 
</script> 

請注意，某些元素包含在chart下，其他元素包含根據block。此外，請注意bottomPct前一段時間更名爲bottomWidth。最後，請注意數據數組中不包含該值的引號;逗號將根據label.format自動添加。

請參見下面的的jsfiddle例如：

http://jsfiddle.net/z0Lr613v/2/

Answer 2

您使用V2.3.0的D3-漏斗，但它已經是v0.7.0的。數據格式也隨着漏斗類構造器接口而改變。

<script src="http://d3js.org/d3.v3.min.js"></script> 
<script src="https://cdn.rawgit.com/jakezatecky/d3-funnel/master/dist/d3-funnel.js?1"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 

<input class="btn btn-primary" type="submit" id="submit_btn" value="Create Chart"> 
<br><br> 
<div id="funnelPanel"> 
    <div id="funnelContainer"> 
     <div id="funnel"></div> 
    </div> 
</div> 

<script> 
    var data = [ 
     ["Clicked", 5000, "5,000"], 
     ["Joined", 2500, "2,500"], 
     ["Shared", 50, "50"] 
    ]; 

    width = $('#funnelPanel').width(); 

    var options = { 
     width: width - 300, 
     height: 400, 
     bottomPct: 1/4, 
     dynamicHeight: true, 
     fillType: "solid", // Either "solid" or "gradient" 
     hoverEffects: true // Whether the funnel has effects on hover 
    }; 

    D3Funnel.defaults.block.dynamicHeight = true; 

    var funnel = new D3Funnel('#funnelContainer'); 
    funnel.draw(data, options); 

    $(window).on("resize", function() { 
    var width = $("#funnelPanel").width(); 
    options.width = width; 
    var funnel = new D3Funnel('#funnelContainer'); 
    funnel.draw(data, options); 
    }); 
    $('#submit_btn').on('click', function() { 
     var changed_data = [ 
      ["clicked", 3000, "3000"], 
      ["joined", 70, "70"], 
      ["shared", 10, "10"] 
     ]; 
     var funnel = new D3Funnel('#funnelContainer'); 
     funnel.draw(changed_data, options); 
    }); 
</script>