现在我用d3创建了几个“盒子”,它们只是带有文本的SVG矩形:
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",i) { return i * 2 * BoxWidth + 5 }) .attr("y",20) .style("width","20px") .style("overflow-x","scroll") .text(function(d) {return d.name});
现在我要做的是当文本超出框的边界时,向每个框添加滚动条.我见过几个创建div的示例,并使用CSS来处理溢出.但是,我将有多个(可变)盒子,我不知道该怎么做.
有什么建议?
– 更新 –
通过将svg元素附加到控制使用CSS样式滚动的div,我能够显示滚动条.
.container { height: 225px; width: 175px; border:2px solid #000; overflow-y: scroll; overflow-x: hidden; } svg { display: block; width: 200%; height: 200%; }
但是,滚动似乎只受svg元素的宽度和高度百分比的影响,而不是div中绘制的rect元素.换句话说,如果矩形太大,除非增加svg元素的宽度和高度,否则仍然无法滚动查看所有矩形.