我正在尝试重新创建 New York Times Fashion Week 中使用的笛卡尔失真效果页。但是，他们使用 D3 版本 3 和 D3js 的鱼眼插件，但不适用于 D3 版本 4。

由于我们做的整个元素都在 D3 V4 中，我无法降级到 D3 Version 3。

有没有其他方法可以使用 CSS 和 jquery 实现这种效果？

我已经尝试过这是我到目前为止的位置:preview

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");
    }
}

如何改进这个，达到纽约时报看到的效果？

最佳答案

您可以仅使用 css 实现此效果。

代码笔:http://codepen.io/hunzaboy/pen/qrRpzZ

body {
  background: #444;
}

.items {
  height: 128px;
  /*change this as per your requirments */
  overflow: hidden;
  display: flex;
}

.item {
  box-shadow: inset 0 0 0 1px #000;
  align-items: center;
  transition: flex 0.2s;
  background-size: cover;
  background-position: center;
  flex: 1;
}

$class-slug: item !default;
@for $i from 1 through 20 {
  .#{$class-slug}-#{$i} {
    background-image: url("https://randomuser.me/api/portraits/women/#{$i}.jpg");
  }
}


/* Flex Items */

.item>* {
  /*   flex: 1 0 auto; */
}

.item:hover {
  flex: 3;
}

.item:hover ~ .item {
  flex: 2;
}

关于javascript - CSS 的笛卡尔失真效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42712573/