Question

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

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

这是jsfiddle：http://jsfiddle.net/westcoast_509/xgafy1to/

这是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：

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

我还是CSS / JS的新手，所以我感谢您提供的任何提示或指示！

Answer 1

我编辑了你的小提琴，以遵守你的要求：http://jsfiddle.net/7tzrrpvr/。我希望这就是你想要的！

你的svg覆盖文本的原因是你使用了绝对定位。请注意这一点，因为将div设置为position: absolute会使其脱离DOM的正常流程，并且会使其对邻居不可见。此外，您的titleBox是在svg之后动态创建的，它将它置于DOM的较低位置。我在javascript中将其移动，以便在svg之前创建它。

我在你的css中添加了一个媒体查询，以实现堆叠小视口列的响应效果。 Twitter Bootstrap（http://getbootstrap.com/）是一个很棒的库，它使用媒体查询自动为您完成此操作 - 如果您计划在应用程序中进一步使用响应式设计，我建议您查看。

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

1 个答案: