Javascript 如何在响应式设计中防止文本在svg上运行？

我正在尝试用SVG和一些文本创建一个响应页面。基本上，我希望SVG显示在页面的左侧，标题和段落显示在右侧，直到查看窗口变得太小，然后让元素堆叠（按照：标题、段落、SVG的顺序）

我现在有两个问题：1。标题和文本运行在svg的顶部（单击下面小提琴中的节点以显示段落文本）。2.当查看窗口变得非常小时，文本似乎会从浏览器左侧消失

以下是JSFIDLE：

下面是javascript：

var diameter = 960;

var tree = d3.layout.tree()
    .size([360, diameter / 2 - 200])
    .separation(function(a, b) { return (a.parent == b.parent ? 1 : 2) / a.depth; });

var diagonal = d3.svg.diagonal.radial()
    .projection(function(d) { return [d.y, d.x / 180 * Math.PI]; });

d3.select("body").append("div")
  .attr("class", "wrapper")

var svg = d3.select(".wrapper").append("svg")
    .attr("viewBox", "0 0 1500 1500")
    .attr("preserveAspectRatio", "xMinYMin meet")
    .attr('class', "cluster")
    .attr("width", diameter)
    .attr("height", diameter)
  .append("g")
    .attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")")
    .style("float", 'left');

d3.json("https://api.myjson.com/bins/589z2", function(error, root) { 

  var nodes = tree.nodes(root),
      links = tree.links(nodes);

  var link = svg.selectAll(".link")
      .data(links)
    .enter().append("path")
      .attr("class", "link")
      .attr("d", diagonal);

 var titleBox = d3.select(".wrapper").append('div', ":first:child")
    .attr('class', 'titleBox')
    .text('Female Humans Amidst Fauna');

  var tooltip = d3.select(".titleBox").append("div")
    .attr('class', 'tooltip')

  var node = svg.selectAll(".node")
      .data(nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + d.y + ")"; })
      .on("mouseover", mouseover) 
      .on('mouseout', mouseout)

      .on("click", function(d) {
          tooltip.transition()
            .ease('linear')
            .duration(2500)  
            .style('opacity', 1)
              .each(function() {
                d3.selectAll('.div').transition()
                  .delay(4000)
                  .duration(2000)
                  .style('opacity', 0)
                  .remove();
              })


          var word = d.word

          tooltip.html(d.beginContext + " " + "<span class='keyword'>" + word + "</span>" + " " + d.endContext);
            //.remove();

      });


  node.append("circle")
      .attr("r", 4.5);

  node.append("text")
      .attr("dy", ".31em")
      .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
      .attr("transform", function(d) { return d.x < 180 ? "translate(8)" : "rotate(180)translate(-8)"; })
      .text(function(d) { return d.name; });

});

var chart = $(".cluster"),
    aspect = chart.width() / chart.height(),
    container = chart.parent();
$(window).on("resize", function() {
    var targetWidth = container.width();
    chart.attr("width", targetWidth);
    chart.attr("height", Math.round(targetWidth / aspect));
}).trigger("resize");

function mouseover() { //makes the text size increase on mouseover
  d3.select(this).select("text").transition()
    .duration(750)
    .style("font-size", "40px");

 }

function mouseout() { //returns text to original size
 d3.select(this).select("text").transition()
    .duration(750)
    .style("font-size", "15px");

 }

---

我对CSS/JS还是很陌生，所以我非常感谢您提供的任何提示和建议

我编辑了你的小提琴以符合你的要求：。我希望这就是你想要的

svg覆盖文本的原因是使用了绝对定位。注意这一点，因为将

div

设置为

position:absolute

会使其脱离DOM的正常流，并有效地使其对其邻居不可见。此外，您的

标题框

是在svg之后动态创建的，这将它放在DOM中较低的位置。我在javascript中将其向上移动，以便在svg之前创建它

---

我在css中添加了一个媒体查询，以实现为小视口堆叠列的响应效果。Twitter Bootstrap（）是一个很棒的库，它使用媒体查询自动为您完成这项工作——如果您打算在应用程序中进一步采用响应式设计，我建议您研究一下这一点。

这很有魅力！非常感谢推特引导的提示——我一定会研究这一点，因为我确实打算用响应性设计来培养我的技能。

.wrapper {
  display: inline-block;
  position: relative;
  width: 100%;
  padding-bottom: 100%; 
  vertical-align: top; 
  overflow: hidden; 

}

.node circle {
  fill: #fff;
  stroke: #41F9D0;
  stroke-width: 1.5px;
}

.link {
  fill: none;
  stroke: #41F9D0;
  stroke-width: 1.5px;
}

.keyword {
  font-size: 3vw;
  color: red;
}

.titleBox {
  display: inline-block;
  font-size: 5vw;
  position: absolute;
  width: 500px;
  top: 50;
  right: 0;
  margin-top: 5vw;
  float: left;
}

.tooltip {
  position: absolute;
  width: 400px;
  font-family: serif;
  opacity: 0;
  font-size: 2vw;
  margin-top: 50px;

}

.cluster {
  display: inline-block;
  position: absolute;
  top: 0;
  left: 0;
}