Customizing the default settings of a d3 funnel chart

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>

Answer №1

When using d3-funnel version 2.3.0, be aware that the current version is actually 0.7.0. This means there have been changes to the data format and also to the funnel class constructor interface.

<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>

Answer №2

It has been pointed out by Antal Baye that the library version you are using is outdated, however, there seems to be some discrepancies in his response based on the most recent documentation. Your current version is:

The updated version is as follows:

Based on the latest documentation, here is how you should structure your page:

<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>

Please take note that certain elements fall under chart while others belong to block. Additionally, it's important to be aware that bottomPct has now been renamed to

bottomWidth</code for a while. Lastly, remember that the data array does not require quotes around the value; commas will be automatically added according to <code>label.format
.

You can view an example on JSFiddle below:

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

405 error: NGINX blocking POST method in Django DRF Vue.js application

I have encountered a strange issue while building my ecommerce site. Everything seems to be working fine, except for the forms. When attempting to post content, I keep receiving a 405 method get not allowed error. It's confusing as I am trying to use ...

insert <asp:linkbutton> dynamically

I have a question regarding ASP: I am receiving a list of IDs from the server on my webpage. Can I display this list in a div below an ASP.NET control? div_containing_link += "" If not, is there another way to achieve this? For example, I want to displ ...

What is the best way to filter an array based on the property of its inner array?

I am grappling with the following array of objects: let a = [ { b: [1, 11, 12], c: "a1" }, { b: [2, 56, 1], c: "a2" }, { b: [1, 2, 3], c: "a3" } ] In search of an operation that is b ...

Sharing data between ejs and javascript files

When using Express, I have encountered an issue with passing a variable to an EJS file called "index.ejs". res.render("index",{passedUser:req.user.alias}) Although I am able to successfully print it using <%=passedUser%> in the EJS file, I require ...

Error: The jasmine framework is unable to locate the window object

Currently, I am testing a method that includes locking the orientation of the screen as one of its functionalities. However, when using Jasmine, I encountered an error at the following line: (<any>window).screen.orientation.lock('portrait&apos ...

Issue with populating dropdown menu inside jquery modal dialog box

When I click on the 'create new button', a modal window form pops up with a dropdown menu. The dropdown is supposed to be populated via ajax with the help of the populateUserData() function. Even though the ajax call seems to be successful, I am ...

The removal of an object becomes unsuccessful when objects with lower indices have been deleted beforehand

Attempting to construct a multi-layer object representing a program; check out my progress here http://codepen.io/Irish1/pen/lbjdw Imagine adding 3 weeks, each with 3 days, and each day having 3 sessions. Removing these objects is feasible as long as caut ...

What is the method to display HTML code using JavaScript within a span element in a JSP page?

While working on a jsp file, I came across a span tag with the following code: <span id="divBasicSearchResults" style="height:100%;"></span> Below is the Javascript function that generates HTML content for this span: function renderBasicSear ...

A pause of 5 seconds between every request in Node.js

Need Help with Delays in Node.js Request Queue I am facing an issue with my code that involves looping through more than 500,000 records in a database and requesting information from another server. I have managed to write all the necessary functions, but ...

What is the best approach for running a database query using the value selected from a form dropdown?

Currently, my application server is ColdFusion and I am using SQL Server for the database. Within a select form element on my webpage, users can choose from a list of vehicles such as Volvo S60, BMW M6, and VW Jetta. Once a user selects a vehicle, I need ...

creating a live updating dropdown menu using Node.js and MySQL

Upon a user clicking and selecting a client, I would like to dynamically update the region dropdown menu with options that are related to that specific client from the databaseenter code here This is my client table: Here is the Region table, where clien ...

Error: The variable <something> has not been defined

Within my GitHub project, an error stating Uncaught ReferenceError: breakpoints is not defined is appearing in the Chrome console. This issue should be resolved by including breakpoints.min.js, but it seems that webpack is somehow causing interference. I ...

Javascript data table pagination and custom attributes resulting in unexpected truncation of strings

Currently, I have implemented an Ajax functionality in my template to receive a JSON response and dynamically populate a datatable with the elements from that JSON: $('.bicam_tests').click(function(){ $.ajax({ type: 'GET', ...

Encountered an issue with a module not being found while trying to install a published React component library that is built using Rollup. The error message states:

In my latest project, I have developed a React component library called '@b/b-core' and used Rollup for building and publishing to the repository. When trying to install the library in a React app, an issue arises where it shows Module not found: ...

Every time I switch tabs in Material UI, React rebuilds my component

I integrated a Material UI Tabs component into my application, following a similar approach to the one showcased in their Simple Tabs demo. However, I have noticed that the components within each tab — specifically those defined in the render method ...

Invoking a plugin method in jQuery within a callback function

Utilizing a boilerplate plugin design, my code structure resembles this: ;(function ( $, window, document, undefined ) { var pluginName = "test", defaults = {}; function test( element, options ) { this.init(); } test.pro ...

How come the font size and div elements combine when I drag and drop the items?

Recently, I decided to create my own drag and drop game. The game is almost complete, but there's one issue. When I try to drop the items into the designated "Drop Items Here" area, their style changes abruptly to mimic the text. For example: Additi ...

What is the specific function of $('id').on('click', this.method.bind(this)) in this scenario?

Check out the app I'm talking about here: I am delving into the bind method in JavaScript to grasp its essence. Upon experimenting with it in the console, my interpretation is that bind produces a duplicate of the function, wherein "this" is tethere ...

Encountering difficulties while trying to integrate a material view in Angular 6, facing the following error

After creating a page using angular 6, I attempted to implement material view for the UI. However, during the implementation process, I encountered the following error: Despite trying to add the material.js lib, I was unable to resolve the issue. An er ...

Tips for refreshing the direction route in google-maps-react

I have an array of coordinates, and when I add a new coordinate to the array, I want the route direction on the map to update accordingly. This is the code snippet from my googlemap.js file: /* global google */ import React, { Component } from "react ...