热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

如何使用D3更改(和转换)DIV高度?-HowcanIchange(andtransition)DIVheightsusingD3?

WhenIchangetheheightoftwoDIVsdirectlyusingset_direct()andreset_direct(),alliswell.当我

When I change the height of two DIVs directly using set_direct() and reset_direct(), all is well.

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

But when I attempt to do the same using D3 (and to add a transition) through set_via_d3() and reset_via_d3(), the DIV heights remain unchanged. Why?

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

transition DIV height

过渡DIV高度



    


    
Bottom

1 个解决方案

#1


1  

First, you aren't selecting your divs:

首先,你没有选择你的div:

d3.select('topdiv') should be d3.select('#topdiv')

d3.select('topdiv')应该是d3.select('#topdiv')

Secondly, in the hierarchy of styling, selection.style will override selection.attr. The former sets the css, the latter sets the tag attributes (which are secondary to the css). Since you've defined heights in css, you need to use an approach like : selection.style("height",height);

其次,在样式层次结构中,selection.style将覆盖selection.attr。前者设置了css,后者设置了标签属性(它们是css的次要属性)。由于你已经在css中定义了高度,你需要使用如下方法:selection.style(“height”,height);

I quickly put together a demo using your code below with those two changes:

我快速使用下面的代码将这两个更改放在一起演示:

        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' }
  
  
      
Bottom


推荐阅读
author-avatar
贰少爷闯天涯_964
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有