How do I make a custom visualization resize to fill the panel?

[sillingworth]

How do I make a custom visualization resize to fill the panel, like the built-in visualizations do?

I've gone through this tutorial but I have only been able to hardcode the size. https://docs.splunk.com/Documentation/Splunk/6.5.3/AdvancedDev/CustomVizTutorial

[sduff_splunk]

You need to overwrite the reflow function. This is called when ever the visualisation is resized. You can get the new dimensions with the following code.

            reflow: function() {
                this.$el = $(this.el);
                var container = this.$el[0];
                var rect = container.getBoundingClientRect();
                // rect.width, rect.height
            }

For the example, you would probably need to redraw the SVG, so perhaps call the following with the new dimensions

            // SVG setup
            var svg  = d3.select(this.el).append('svg')
               .attr('width', width)
               .attr('height', height)
               .style('background', 'white')
               .append('g')
               .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');