当我直接使用 set_direct() 和 reset_direct() 更改两个 DIV 的高度时，一切正常。
但是，当我尝试通过 set_via_d3() 和 reset_via_d3() 使用 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>
最佳答案
首先，您没有选择 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>关于javascript - 如何使用 D3 更改(和过渡)DIV 高度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44315807/