Question

我正在使用D3和SVG。我尝试使用div将文字环绕成圆形。但是如果文本内容太长（超过div大小），它应该有滚动条来查看更多的文本内容。这是我的代码。

Main.js

var width = $(window).width();
    var height = $(window).height();
    var radius = 80;
    var interactiveCircleRadius = 200;
    var testText = "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, "+
    "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat,"+
    "sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum."+
    "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet."+
    "Lorem ipsum dolor sit amet, consetetur sadipscing elitr,"+
    "sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua."+
    "At vero eos et accusam et justo duo dolores et ea rebum."+
    "Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.";

var dragGroup = d3.behavior.drag()
      .on('dragstart', function() {
        console.log('Start Dragging Group');
      }).on('drag', function(d, i) {
        d.x += d3.event.dx;
        d.y += d3.event.dy;
        d3.select(this).attr("transform", "translate("+d.x+","+d.y+")");
      });

var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

var interactiveCircleContainer = svg.append("g")
                                                .data([{x:250,y:250}])
                                                .attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")";})
                                                .attr("class", "interactiveCircle")                                             .call(dragGroup);


interactiveCircleContainer.append("defs").append("pattern")
                                      .attr("id","interactivecircleImage")
                                      .attr("width",1)
                                      .attr("height", 1)
                                      .append("image")
                                      .attr("xlink:href", "https://hdwallpapers.cat/wallpaper_3840x2160/small_bay_sky_cliff_night_nature_oceans_ultra_3840x2160_hd-wallpaper-1835411.jpg")
                                      .attr("width", interactiveCircleRadius)
                                      .attr("height", interactiveCircleRadius)
                                      .attr("preserveAspectRatio","none");

var interactiveCircle = interactiveCircleContainer.append("circle")
                                    .attr("r", interactiveCircleRadius/2)
                                    .attr("id", "interactiveCircle")
                                    .style("stroke", "#FFFFFF")
                                    .style("stroke-width", 3)
                                    .style("fill", "url(#interactivecircleImage)");
var interactiveCircle = interactiveCircleContainer.append("circle")
                  .attr("r", interactiveCircleRadius/2)
                  .style("fill", "url(#interactivecircleImage)");

var forienObj = interactiveCircleContainer.append("foreignObject")
                                      .attr("x",-(interactiveCircleRadius/2))
                                      .attr("y",-(interactiveCircleRadius/2))
                                      .attr("width", 200)
                                      .attr("height", 200)
                                      .append("xhtml:div")
                                      .style("color", "#FFFFFF")
                                      .style("font", "14px 'Helvetica Neue'")
                                      .attr("class", "interactiveCircleTextInner")
                                      // .style("top")
                                      .text(testText);

的style.css

body{
    background-color: #000000;
  height: 100%;
}

.interactiveCircleTextInner{
  overflow:scroll;
  height:200px;
}

问题是overflow:scroll正在运行，但它不适合div。

感谢。

溢出滚动无法按预期工作

0 个答案: