Responsive d3 Funnel

Question

I'm having trouble with this d3 Funnel Library

I'm currently using this setup to make the chart responsive onload:

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

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

var options = {
    width : width - 30,
    height : 400,
    bottomWidth : 1/3,
    bottomPinch : 0,      // How many sections to pinch
    isCurved : false,     // Whether the funnel is curved
    curveHeight : 20,     // The curvature amount
    fillType : "solid",   // Either "solid" or "gradient"
    isInverted : true,   // Whether the funnel is inverted
    hoverEffects : true  // Whether the funnel has effects on hover
};

$( "#funnelContainer" ).css( "width", width);

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

I would love to, however, be able to do something like:

var options = {
    width : "100%",
    height : "100%"
};

and have the chart responsive as I change the width of the browser.

How do I accomplish this?

EDIT:

I tried implementing this answer as suggested: Whats the best way to make a d3.js visualisation layout responsive?

Here is the old code:

var svg = d3.select ( selector )
      .append ( "svg" )
      .attr ( "width", this.width )
      .attr ( "height", this.height )
      .append ( "g" );

And here is my modified version:

var svg = d3.select ( selector )
      .append ( "svg" )
      .attr ( "width", this.width )
      .attr ( "height", this.height )
      .attr("id", "funnel")
      .attr("viewBox", "0 0 " + this.width  + " " + this.height )
      .attr("preserveAspectRatio", "xMinYMin")
      .append ( "g" );

 var aspect = this.width / this.height;
 var chart = $("#funnel");
 $(window).on("resize", function() {
    var targetWidth = chart.parent().width();
    chart.attr("width", targetWidth);
    chart.attr("height", targetWidth / aspect);
 });

But it still won't resize properly. Did I implement it wrong, or is this not the correct solution for this?

Have a look at [**this question**](http://stackoverflow.com/questions/9400615/whats-the-best-way-to-make-a-d3-js-visualisation-layout-responsive) — jshanley, Aug 13 '14 at 14:16
yes, the best (and only?) way is to make the svg responsive itself. as the reply linked above suggests — tomtomtom, Aug 13 '14 at 14:27
Just tried to use that solution, but it didn't work. Updated my question to show how I did it. — carte, Aug 13 '14 at 14:49
Hi Hupukar. That sounds like a great solution. Can you post it as an answer (instead of an edit to the question) and accept it? That will make it easier for people that find this question later to quickly see that there was an answer (since the "accepted answer" is more prominently shown than your **Edit**). — Frank van Puffelen, Aug 24 '14 at 20:33

score 3 · Answer 1 · answered Aug 13 '14 at 16:02

The funnel chart doesn't seem to have an option to update its width after it's been created. So the easiest way to adapt to a new size is to simply create a new funnel:

$(window).on("resize", function() {
    options.width = $("#funnelPanel").width();
    var funnel = new D3Funnel ( data, options );
    funnel.draw('#funnelContainer');
});

See http://jsbin.com/kisawi/1

Responsive d3 Funnel

1 Answers1