javascript - 3d 鱼眼 - 如何在鼠标悬停时使条形变宽？

Question

我正在使用这个 d3 示例并实现了鱼眼。基本上，组元素包含矩形和文本元素。如何在鼠标悬停时使组 (bar+txt) 更宽？

这是我的 fiddle :http://jsfiddle.net/30114/w4tfr68s/

代码:

    var xFisheye = d3.fisheye.scale(d3.scale.identity).domain([0, width]).focus(1000);

...

    svg.on("mousemove", function() {
        var mouse = d3.mouse(this);
        xFisheye.focus(mouse[0]);

        redraw();
    });

    function redraw() {

        bars
            .attr("transform", function(d){

            return "translate("+ xFisheye(d) +",0) scale(1, 1)";

        });
    }

Answer 1

我也遇到了类似的问题。所以基本上用 y 的原始值乘以比例因子来翻译你的条对我来说是有效的。

function redraw(){
    bars
    .attr("transform", function(d) { 
         return "translate("+ xFisheye(d) +"," + y*1.2) + ") scale(1.2, 1.2)"; 
    });        
}

这应该有效。如果这有帮助，以下是我使用的代码:

.on("mouseover", function(d) 
{
     tool_tip.show(d);
     d3.select(this)
     .attr("transform", function(d) 
     { 
         return "translate("+ x(d.x0) +"," + y(d.length*1.2) + ") scale(1.2, 1.2)"; 
     });        
})

.on("mouseout", function(d) 
{
     tool_tip.hide(d);
     d3.select(this)
     .attr("height", height - y(d.length))
     .attr("transform", function(d) 
     { 
         return "translate("+ x(d.x0) +"," + y(d.length) + ") scale(1, 1)";
     });
});