矩形集的 D3.js 过渡答案

【问题标题】：D3.js transition for set of rectangles矩形集的 D3.js 过渡
【发布时间】：2015-09-14 17:15:35
【问题描述】：

这是我的问题，我想使用 d3.js 的 transition() 方法，但是对于一组我不知道大小的矩形。

例如：起初我有 2 个矩形，然后是 3 个，然后是 4 个，然后是 2 个。

在这种情况下我可以使用transition() 吗？如果是这样，最好的方法是什么？

提前致谢

【问题讨论】：

那要看情况了，你到底想转换什么？

标签： javascript d3.js transition visualization

【解决方案1】：

我使用不可见的矩形在图表中提供良好的悬停效果。因此，在创建矩形时，我只需为它们分配一个类。在更新时，我首先删除该类的元素，然后重复该过程。

tmpsvg = svg.transition();
g = tmpsvg.select('g');//prefer to refer by classname

g.selectAll(".bar-rect").remove();
var rect = g.selectAll(".bar-rect")
    .data(data)
    .enter().append("svg:rect")
    .attr("class", "bar-rect")
    .attr("x", function(d, i) { return x(d.key)-10; })
    .attr("y", 0)
    .attr("width", "20px")
    .attr("height", h)
    .on("mouseenter", function(d, i) {
       //TOOLTIP EFFECTS ON MOUSE-ENTER
                $('#myls'+i).animate(  {opacity:1 },100);
                 $('.chart-tooltip[data-index='+i+']').addClass('hover');
        // Add hover class to the targeted point
    }).on("mouseleave", function(d, i) {
//REMOVE TOOLTIP EFFECT ON MOUSE-LEAVE
            $('#myls'+i).animate(  {opacity:0 },100);
            $('.chart-tooltip').removeClass('hover');
            // Remove hover class from the targeted point

        });

这可能不是最有效的方法，但希望对您有所帮助。

【讨论】：

这也可以在不使用过渡功能的情况下工作。如果我们重新渲染矩形，是否真的需要使用过渡函数？
此外，如果您的矩形有一个类，您可以使用 selectAll('.class') 来获取整个矩形集并按照您的意愿进行操作。