D3.js 一组矩形的过渡
D3.js transition for set of rectangles
这是我的问题,我想使用 d3.js 的 transition()
方法,但是对于一组我不知道大小的矩形。
例如:起初我有 2 个矩形,然后是 3 个,然后是 4 个,然后是 2 个。
在这种情况下我可以使用 transition()
吗?如果是这样,最好的方法是什么?
提前致谢
我使用不可见的矩形在图表中提供良好的悬停效果。因此,在创建矩形时,我只是简单地为它们分配一个 class。在更新时,我首先删除了 class 的元素,然后重复该过程。
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
});
这可能不是最有效的方法,但希望对您有所帮助。
这是我的问题,我想使用 d3.js 的 transition()
方法,但是对于一组我不知道大小的矩形。
例如:起初我有 2 个矩形,然后是 3 个,然后是 4 个,然后是 2 个。
在这种情况下我可以使用 transition()
吗?如果是这样,最好的方法是什么?
提前致谢
我使用不可见的矩形在图表中提供良好的悬停效果。因此,在创建矩形时,我只是简单地为它们分配一个 class。在更新时,我首先删除了 class 的元素,然后重复该过程。
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
});
这可能不是最有效的方法,但希望对您有所帮助。