d3过渡以扩展div [英] d3 transition for expanding div

问题描述

我想在d3对象中创建一个过渡，将鼠标悬停在svg矩形上，然后将div扩展到svg对象之外，并在其中添加数据值:

I want to create a transition within my d3 object where I hover on a svg rectangle and beyond the svg object a div expands with the datavalues in it:

我的div具有以下变量:

I have the following variables for my divs:

var answer = d3.select("body").select("div.answer");
var datablock = answer.select("p.data");

为了在我的svg对象悬停时扩展 answer :

In order to extend answer on hover of my svg object:

.on("mouseover"), function(d) {
      answer.transition()
            .duration(1000)
            .attr("height",200)
            .style("border", "1px solid black");
      datablock.text(d.name+" = "+d.age);  
    }

但是它不起作用，在处理div的高度时我做错了什么吗?除此以外，还有一些其他转换都在起作用.

but it is not working, am I doing something wrong when addressing the height of the div? There are some other transitions which are all working exept this one.

推荐答案

< div> 元素没有height属性，它具有height CSS样式，必须具有有效的单位，除非高度为0.

A <div> element does not have a height attribute it has a height CSS style that must have units to be valid unless the height is 0.

这篇关于d3过渡以扩展div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！