Responsiveness

[theavijitsarkar]

I want the chart to auto adjust to width.

My code

var sets = [{
                        sets: ['Present'],
                        size: xx
                        
                    },
                    {
                        sets: ['Holiday'],
                        size: xx
                        
                    },
                    {
                        sets: ['WeeklyOff'],
                        size: xx
                        
                    },
                    {
                        sets: ['Present','Holiday'],
                        size: xx
                        
                    },
                    {
                        sets: ['Present','WeeklyOff'],
                        size: XX
                        
                    },
                    {
                        sets: ['WeeklyOff','Holiday'],
                        size: xx
                        
                    },
                    {
                        sets: ['WeeklyOff','Holiday','Present'],
                        size: XX
                        
                    }
                ];

                var chart = venn.VennDiagram(); 
              d3.select("#venn").datum(sets).call(chart);

[theavijitsarkar]

Fixed this temporarily with width( container.width() ) function.

[skosch]

The best approach might be this one.

I currently accomplish this in React with this horrible, horrible hack:

const width = 230;
const height = 250;
d3selection.select(this.refs.venn)
.datum(sets)
.call(VennDiagram().height(height).width(width));

const vennDiv = document.getElementById("venn");
const vennSvg = vennDiv.children[0];

vennDiv.setAttribute("class", "svg-container oneten-height");
vennSvg.removeAttribute("height");
vennSvg.removeAttribute("width");
vennSvg.setAttribute("viewBox", `0 0 ${width} ${height}`);
vennSvg.setAttribute("preserveAspectRatio", "xMaxYMin meet");
vennSvg.setAttribute("class", "svg-content-responsive");

d3selection.selectAll("#venn .venn-circle path").style("fill", function(d,i) { return colours[i]});

And then you just adjust padding-bottom on the svg-container until the aspect ratio fits. It's not pretty, but it works very well. It would be super neat if venn.js exposed the viewBox and classlist directly (similar to the height() function on the chart). @benfred what do you think?

[clintonmedbery]

I forked https://github.com/benfred/venn.js/pull/135 and it works great.