Question

当我使用set_direct()和reset_direct()直接更改两个DIV的高度时，一切都很好。

但是当我尝试使用D3（并通过set_via_d3()和reset_via_d3()添加转换）时，DIV高度保持不变。为什么呢？

<!DOCTYPE HTML>
<head>
    <style>
        div { width: 300px; }
        div#outerdiv  { height: 500px; background-color: #fdf; }
        div#topdiv    { height: 400px; background-color: #dff; }
        div#bottomdiv { height: 0px;   background-color: #ffd; display: 'none' }
    </style>
</head>
<body>
    <div id="outerdiv">
        <div id="topdiv">
            <button onclick=set_via_d3();>Set</button>
            <button onclick=reset_via_d3();>Reset</button>
        </div>

        <div id="bottomdiv">
            <span>Bottom</span>
        </div>
    </div>

    <script src="https://d3js.org/d3.v4.min.js"></script>

    <script>
        function set_direct() {
            document.getElementById('topdiv').style.height = '100px';
            document.getElementById('bottomdiv').style.height = '300px';
            document.getElementById('bottomdiv').style.display = 'inline-block';
        }
        function set_via_d3() {
            d3.select('topdiv').transition().duration(500)
              .attr('height', '100px');
            d3.select('bottomdiv').transition().duration(500)
              .attr('height', '300px').attr('display', 'inline-block');
        } 
        function reset_direct() {
            document.getElementById('topdiv').style.height = '390px';
            document.getElementById('bottomdiv').style.height = '10px';
            document.getElementById('bottomdiv').style.display = 'none';
        }
        function reset_via_d3() {
            d3.select('topdiv').transition().duration(500)
              .attr('height', '390px');
            d3.select('bottomdiv').transition().duration(500)
              .attr('height', '10px').attr('display', 'none');
        }
    </script>
</body>

Answer 1

首先，你没有选择你的div：

d3.select('topdiv')应为d3.select('#topdiv')

其次，在样式层次结构中，selection.style将覆盖selection.attr。前者设置了css，后者设置了标签属性（它们是css的次要属性）。由于您已在css中定义了高度，因此您需要使用以下方法：selection.style("height",height);

我使用下面的代码快速整理了一个演示，并进行了以下两项更改：

        function set_via_d3() {
            d3.select('#topdiv').transition().duration(500)
              .style('height', '100px');
            d3.select('#bottomdiv').transition().duration(500)
              .style('height', '300px').attr('display', 'inline-block');
        } 
        function reset_via_d3() {
            d3.select('#topdiv').transition().duration(500)
              .style('height', '390px');
            d3.select('#bottomdiv').transition().duration(500)
              .style('height', '10px').attr('display', 'none');
        }

        div { width: 300px; }
        div#outerdiv  { height: 500px; background-color: #fdf; }
        div#topdiv    { height: 400px; background-color: #dff; }
        div#bottomdiv { height: 0px;   background-color: #ffd; display: 'none' }

  <script src="https://d3js.org/d3.v4.min.js"></script>
  
      <div id="outerdiv">
        <div id="topdiv">
            <button onclick=set_via_d3();>Set</button>
            <button onclick=reset_via_d3();>Reset</button>
        </div>

        <div id="bottomdiv">
            <span>Bottom</span>
        </div>
    </div>

如何使用D3更改（和转换）DIV高度？

1 个答案: