CODEWITHSUNDEEP
javascriptangularjsd3.js
Praveen
Praveen

Reputation: 347

D3 - issue with applying scroll to legends container with in svg

I am new to d3.js here, please help, where i want to apply scrolling to div, which has svg and underneath legends, legends will be added dynamically based on the multiline chart, for demonstration i put through single trend line but in real time there will be like 10 to 20 trend lines in the single chart. The issue is the with legends, are cutting off, i know this is because of svg has height limit, how to overcome this problem?, i have tried applying overflow-y:scroll to svg but doesn't work, tried putting legends in foreignObject element works fine but doesn't work in IE, the application that i am working on will run in IE mostly.

Any help is much appreciated.Plunker

Upvotes: 1

Views: 650

Answers (1)

M. Davis
M. Davis

Reputation: 709

It looks like your problem is with the height of the SVG itself. Try resizing the SVG to something larger like:

d3.select('svg').attr('height', 600);

Even try this in the console.

The SVG doesn't really have a max height (as far as I am aware). The problem is that your div is a larger height (400 px) than your SVG (~370px). If the SVG is larger than the div, according to your y-overflow: scroll, it will be scrollable, but will retain the appearance (because of the div) of being 400 px tall. However, if the div is larger than the SVG, there's nothing to scroll.

Upvotes: 0

Related Questions