Question

我过去制作了一个堆积条形图，并且我在鼠标悬停上添加了一些整洁的效果。添加到这些上我想改变用户悬停的矩形的大小，并在鼠标离开矩形后返回默认大小。

目标是在鼠标悬停时使矩形更改大小，因此我使用以下内容开始使用高度：

        .on('mouseover', function(d){
        d3.select(this).style("height", "110%");
      } )

期望矩形与其原始高度相比，高度为110％。可悲的是，它没有以这种方式工作，而是获得了div高度的110％。所以我尝试使用D3选择器：

        .on('mouseover', function(d){
        d3.select(this).style("height", d3.select(this).style("height")*1.10));
      } )

但这也没有解决问题，这个代码的大小没有变化。如果我记录元素的高度我创建了我的日志读取auto，这让我相信我在获取rect的高度值时做错了什么，语法是什么我应该使用吗？

编辑：尝试下面的echonax答案，我的堆积条形图中rect元素的完整代码如下：

 Jaar.selectAll("rect")
    .data(function(d) { return d.ages; })
    .enter().append("rect")
    .attr("width", x.rangeBand())
    .attr("y", function(d) { return y(d.y1); })
    .attr("height", function(d) { return y(d.y0) - y(d.y1); })
    .style("fill", function(d) { return color(d.name); })
    .style("opacity", 1)
    .on('mouseover', function(d){
        d.color = color(d.name);
        d3.select(this).style("opacity", 1);
        d3.select(this).style("height", height*1.1);
        d3.select(this).style("width", width*1.1);
        console.log(d3.select(this).style("width"));
        tip.show(d);
      } )
      .on('mouseout', function(d) {
        d3.select(this).style("opacity", 0.6);
        d3.select(this).style("height", height);
        d3.select(this).style("width", width);
        tip.hide(d);
      } );

Answer 1

使用

d3.select(this).attr("height", (y(d.y0) - y(d.y1))*1.1);

将大小更改为110％

你不能d3.select(this).style("height")*1.10，因为d3.select(this).style("height")是一个字符串，等于＆＃34; 100px＆＃34;例如。

你可以做的是删除＆＃34; px＆＃34;从String中，乘以1.1，然后添加＆＃34; px＆＃34;到最后

var newHeight = parseInt(d3.select(this).style("height"))*1.1 + "px";
d3.select(this).style("height", newHeight);

Answer 2

这是演示的小提琴：http://jsfiddle.net/q5q6331p/16/

  .on("mouseover", function(d) { 
    d3.select(this).attr("height", function(d){
        return (y(d.y0) - y(d.y0 + d.y))*1.5
    });
  })
  .on("mouseout", function(d) { 
    d3.select(this).attr("height", function(d){
        return (y(d.y0) - y(d.y0 + d.y))
    });
  })

使用D3在鼠标悬停时更改元素大小

2 个答案: