Right now I used d3 to create several “boxes” that are just SVG rectangles with text:
var canvas = d3.select("body").append("svg") .attr("width", 800) .attr("height", 500); //specifies drawing area for each box var boxes = canvas.selectAll("rect") .data(classData) .enter(); boxes.append("rect") .attr("width", boxWidth) .attr("height", boxHeight) .attr("fill", boxColor) .attr("x", function (d, i) { return i * 2 * boxWidth }); text.append("text") .attr("fill", textColor) .attr("x", function (d, i) { return i * 2 * boxWidth + 5 }) .attr("y", 20) .style("width", "20px") .style("overflow-x", "scroll") .text(function(d) {return d.name});
Now, what I would like to do is add scroll bars to each field when the text goes beyond the field. I saw a couple of examples that created a div and used CSS to handle overflows. However, I will have several (variable) fields, and I'm not sure how to do this.
Any suggestions?
- UPDATE -
I managed to get scrollbars by adding svg elements to a div that controls the scroll of CSS styles.
.container { height: 225px; width: 175px; border:2px solid #000; overflow-y: scroll; overflow-x: hidden; } svg { display: block; width: 200%; height: 200%; }
However, scrolling, apparently, depends only on the width and height of the svg element, and not on the rect element, which is drawn in the div. In other words, if the rectangle is too large, you still cannot scroll it unless you increase the width and height of the svg element.
Is there a way that I can have a scrollable div depending on what's inside? Or should I try to somehow calculate and change the width and height attributes of the svg element?
look at the code here