Override default funnel diagram d3

Question

I use the following link to create a funnel diagram with D3: jakezatecky / d3-funnel

The code is working fine. Now, as the tutorial says, I want the heights of the blocks to be proportional to their weight, so I need to change the D3 deafult:

D3Funnel.defaults.block.dynamicHeight = true;

but when I add the tihs line to my code, the whole graph will disappear.

Could you help me deal with the problem? code:

<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

Antal Baye is right that you are using an outdated version of the library, but his answer is not quite right according to the latest documentation. You are using:

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

Latest Version:

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

d3- v2.3.0, 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>