javascript - 如何在D3中将鼠标悬停在更大的位置？

我正在尝试做相当于

.somediv:hover {
    -webkit-transform:scale(1.1, 1.1);
    -moz-transform:scale(1.1, 1.1);
    -ms-transform:scale(1.1, 1.1);
    -o-transform:scale(1.1, 1.1);
    transform: scale(1.1);
}

.somediv {
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -ms-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

在D3中。

我有一个条形图/直方图，我想将其悬停并在鼠标悬停时使其颜色变大和变暗，并使其在鼠标移开时回到原始形状和大小。

我尝试将鼠标悬停事件添加到svg元素，但是它不起作用。条形仅向右或向左移动，并且位于极角的一些条形消失而不是变大。

svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("x", function(d,i) {
                    return i * (width/dataset.length);
                })
                .attr("y", function(d) {
                    return height-(d*myheight);
                })
                .attr("width", width / dataset.length - barPadding)
                .attr("height", function(d) {
                        return d*myheight;
                 })
                 .attr("fill", function(d) {
                        return "rgb(0, 0, " + (d * 8) + ")";
                 })

                .on("mouseover", function(d,i) {
                d3.select(this)
               .attr("transform", "scale(1.1,1.1)");
              }

我该如何解决？

最佳答案

您可以尝试使用CSS transform属性，这将允许您设置transform-origin: 50% 50%;，因此它们将从中心缩放，而不是沿您看到的方向缩放。

.on("mouseover", function(d,i) {
    d3.select(this)
        .style("transform", "scale(1.1,1.1)")
        .style("transform-origin", "50% 50%");
}

关于javascript - 如何在D3中将鼠标悬停在更大的位置？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/42155320/