Question

我使用这个d3示例实现了鱼眼。基本上，group元素包含rect和text元素。如何在鼠标悬停时使组（bar + txt）更宽？

这是我的小提琴：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的原始值乘以为我工作的比例因子来翻译你的柱。

<%= f.select :charge_occurrence, [['Monthly', 'monthly'], ['Per Episode', 'episodic']], html: {'data-name' => 'charge_occurence', class: "w-input", maxlength: "256", required: "required"} %>

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

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

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

1 个答案: