Question

我的<p>标签不会显示在嵌套的div图层中，我不确定问题是来自1）我的css样式表还是2）我的方式生成<p>标签或3）完全不同的东西。

我的index.html设置为：

<div id="container">
  <div id="header"></div>
  <div id="wrapper">
    <div id="chart"></div> /* contains an svg */
    <div id="questions"></div> /* contains p tags */
    <div id="tables"></div> /* contains html tables */
  </div>
</div>

我已将js文件链接到索引页面。 js文件使用d3和jquery。在js文件中我试图使它成为当你单击SVG的一个元素时，相关的文本出现在#questions div层中。代码如下所示：

node.append("circle")
  .attr("r", function(d) { return d.r; })
  .on("click", function(d,i) {
    // text = d.data.topics;
    array = d.data.topics;
    var i=1;
    array.forEach(function(question){
      index="q"+i;
      $("#tables").append("<p>"+question[index]+"</p>");        
      i++;
    });
  });

发生的事情是，当您点击SVG中的元素时，生成<p>标记并将其附加到#questions图层，但它们在{{#questions内不可见1}} div层。如果<p>标记位于#questions div图层之外，则仅显示#container标记;例如，如果我要将它们附加到#container { width: 1080px; height: 800px; border: none; overflow: hidden; position: absolute; border: 1px solid #000; } #wrapper{ position: absolute; width: 100%; height: 80%; border: 1px solid #000; } #header{ position: relative; height: 20%; width: 100%; } #chart{ position: relative; width: 50%; height: 100%; float: left; overflow: hidden; border: 1px solid #000; } #questions{ width: 50%; height: 50%; position: relative; left: 50%; vertical-align: top; border: 1px solid #000; } #tables{ position: relative; width: 50%; height: 50%; left: 50%; border: 1px solid #000; } #container #wrapper #questions p { height: 100%; width: 100%; font-family: sans-serif; color: #000; } div层。

我有一个链接的css文件，它按如下方式设置div图层的样式：

$('#applyChanges').on('click', function () {
    var chosenColor = $('#colbg').val();
    $('#colcss').css({ backgroundColor: chosenColor });
})

Answer 1

您的语法不正确<div="tables'>。您需要添加class或id，在您的情况下，您需要<div id="tables">。为所有div做这个

Answer 2

所以，前一段时间，我实际上是通过更改index.html文件中div层的顺序来解决这个问题。我没有在<div id = "chart">下包含<div id = "wrapper">，而是将<div id = "chart"移到<div id="wrapper">图层之外。

<body>

 <div id="container">

  <div id="header"></div>

  <div id="wrapper">
   <div id="questions"></div>
   <div id="tables"></div>
  </div>

  <div id="chart"></div>

  <script src = "chart2.js"></script>
  <script src = "tables.js"></script>

 </div>


</body>

<p>标记未显示在嵌套的div图层中

2 个答案: