我正在尝试重新创建纽约时报时装周页面中使用的笛卡尔畸变效果。然而,他们使用的是D3版本3和D3js的鱼眼插件,这与D3版本4不兼容。
由于我们整个项目都是在D3 V4中进行的,我无法降级到D3版本3。
是否有其他方法可以使用CSS和jquery实现这种效果?
我已经尝试过,这是我目前的进展:预览
如何改进这个并实现在纽约时报中看到的效果?
由于我们整个项目都是在D3 V4中进行的,我无法降级到D3版本3。
是否有其他方法可以使用CSS和jquery实现这种效果?
我已经尝试过,这是我目前的进展:预览
window.onload = run;
function run() {
if ($('.overlayDiv').css('display') != 'none') {
var container = d3.select('.overlayDiv');
container.empty();
var val = parseInt(5);
var overlayWidth = $(".overlayDiv").width();
var vwidth = (overlayWidth / (val));
console.log(vwidth);
for (i = 0; i < val; ++i) {
var div = container.append("div").style("width", vwidth + "px")
.style("height", "100%")
.style("background", "rgb(75, 123, 175)")
.style("float", "left")
var year = div.text(i)
.attr("class", "summary")
.style("text-align", "center")
.style("font-size", "32px")
.style("font-weight", "bold")
.style("line-height", "100px").style("color", "white")
.on('mouseover', function() {
d3.select(this)
.transition().style('width', $(".overlayDiv").width() / 2 + "px")
.style("background", "rgba(90, 90, 90, 0.78)")
$('.summary').not(this).each(function() {
$(this).css("width", (overlayWidth / 3) / (val));
});
})
.on('mouseout', function() {
d3.select(this)
.transition().style('width', vwidth + "px")
.style("background", "rgb(75, 123, 175)")
$('.summary').not(this).each(function() {
$(this).css("width", vwidth);
});
})
}
$('.overlayDiv').show();
//$('.overlayDiv').text(this.firstChild.nextSibling.innerHTML);
$('.overlayDiv').addClass("overlayActive");
$('.overlayDiv').removeClass("overlayInactive");
} else {
var container = d3.select('.overlayDiv');
container.empty();
$('.overlayDiv').hide();
$('.overlayDiv').text("");
$('.overlayDiv').removeClass("overlayActive");
$('.overlayDiv').addClass("overlayInactive");
}
}
如何改进这个并实现在纽约时报中看到的效果?