I recently used the following link to create a funnel chart using D3: jakezatecky/d3-funnel
Everything was working perfectly. However, I wanted to adjust the block heights in proportion to their weight as mentioned in the tutorial by changing the D3 default setting:
D3Funnel.defaults.block.dynamicHeight = true;
Unfortunately, when I added this line to my code, the entire chart disappeared.
Could someone please help me identify the issue? Below is the code snippet:
<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>