Right now Ich habe d3 verwendet, um mehrere "Boxen" zu erstellen, die nur SVG-Rechtecke mit Text sind:

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

Jetzt möchte ich jedem Feld Bildlaufleisten hinzufügen, wenn sich der Text außerhalb der Feldgrenzen befindet. Ich habe ein paar Beispiele gesehen, die ein @ erstellt habdiv und verwendete CSS, um den Überlauf zu behandeln. Ich werde jedoch mehrere (variable) Boxen haben und bin mir nicht sicher, wie ich das anstellen soll.

Irgendwelche Vorschläge

- UPDATE -

Ich konnte Bildlaufleisten anzeigen, indem ich svg-Elemente an ein div anhängte, das das Scrollen mit CSS-Stilen steuert.

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

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

Das Scrollen scheint jedoch nur durch die prozentualen Breiten- und Höhenangaben des svg-Elements und nicht durch das im div gezeichnete rect-Element beeinflusst zu werden. Mit anderen Worten, wenn das Rechteck zu groß ist, können Sie immer noch keinen Bildlauf durchführen, um alles zu sehen, es sei denn, Sie erhöhen die Breite und Höhe des svg-Elements.

Ist es eine Möglichkeit, die div-Schriftrolle basierend auf dem, was darin gezeichnet ist, zu haben? Oder sollte ich irgendwie versuchen, die Attribute width und height des Elements svg zu berechnen und zu ändern?

Sehen Sie den Code hier