Создание скроллбары с SVG и d3.js

Сейчас я использовал d3, чтобы создать несколько «окон», которые просто SVG прямоугольниками с текстом:Создание скроллбары с SVG и d3.js

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});

enter image description here

Теперь то, что я хотел для этого нужно добавить полосы прокрутки в каждый квадрат, когда текст выходит за рамки поля. Я видел пару примеров, которые создали div и использовали CSS для обработки переполнения. Тем не менее, у меня будет несколько (переменных) полей, и я не уверен, как это сделать.

Любые предложения?

- ОБНОВЛЕНИЕ -

я смог скроллбары появляться путем добавления SVG элементов к DIV, который управляет прокруткой со стилями CSS.

.container { 
    height: 225px; 
    width: 175px; 
    border:2px solid #000; 
    overflow-y: scroll; 
    overflow-x: hidden; 
} 

svg { 
    display: block; 
    width: 200%; 
    height: 200%; 
}

Тем не менее, прокрутка, кажется, влияет только ширины и высоты процентах от элемента, а SVG, чем элемент Rect, который обращается в DIV. Другими словами, если прямоугольник слишком велик, вы все равно не можете прокручивать его, чтобы увидеть все, если вы не увеличиваете ширину и высоту элемента svg.

Есть ли способ, которым я могу иметь прокрутку div на основе того, что нарисовано внутри? Или я должен попытаться как-то вычислить и изменить атрибуты width и height элемента svg?

view the code here

источник

2015-04-25 dsabsay

Вам нужно будет добавить дивы в документ и поместите их поверх SVG. Установите 'overflow-y: scroll' в divs. –

@Incodeveritas Спасибо за ваш ответ! Я думаю, что я сделал то, что вы здесь сказали: jsfiddle.net/azkqyjp6/3 Но у меня все еще есть пара вопросов. 1) Прямоугольник кажется меньше, чем нужно. Почему это происходит, и как я могу это исправить? И 2) Когда я увеличил высоту прямоугольника, он просто обрезается, и на экране не появляется полоса прокрутки. Что я делаю не так? – dsabsay

Нет, вы не можете использовать прямоугольники. Вам нужно добавить divs на тело и разместить их поверх svg, используя абсолютное/фиксированное позиционирование. –

Try добавить свойство Viewbox SVG:

var rectangle = container.append("svg") 
    .attr("viewBox", "0,0,150,420") 
    .append("rect") 
    .attr("width", 150) 
    .attr("height", 420) 
    .attr("fill", "steelblue") 
    .attr("x", 0) 
    .attr("y", 0);

jsfiddle

источник

2015-11-30 15:34:36 ElChiniNet

Добавить элементы svg в div - не лучшее решение, это должно быть еще одно решение. – albert

Создание скроллбары с SVG и d3.js

ответ

Смежные вопросы