Question

我正在尝试相当于

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

我该如何解决这个问题？

Answer 1

我建议你不要使用 SVG比例变换来使你的栏更大。原因很简单：scale以SVG的原点（0,0）为中心，即左上角。因此，任何不在该位置（0,0）的元素似乎都会移动（请参阅我的答案：SVG Circle element jumps upon scale transform）。这解释了您描述的行为：

酒吧向右或向左移动，极端角落的一些条形消失，而不是变大。

话虽如此，我建议您使用简单的D3功能来改变你的酒吧。在这一点上，你的问题对S.O.来说几乎“过于宽泛”。（因为有几种方法可以增加鼠标悬停时的条形图），但是，例如，这里是一个在条形图的每一侧添加10px的示例：

    .on("mouseover", function(d, i) {
        var xPos = +d3.select(this).attr("x")
        var wid = +d3.select(this).attr("width");
        d3.select(this).attr("x", xPos - 10).attr("width", wid + 20);
    }).on("mouseout", function() {
        d3.select(this).attr("x", function(d) {
                return xScale(d.name)
            })
            .attr("width", xScale.bandwidth());
    });

我只增加了条形图的宽度，因为作为dataviz设计器，我认为更改条形图的高度（编码信息）会产生误导给用户。

这是一个演示：

var w = 300,
    h = 100,
    padding = 20;
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

var data = [{
    name: "foo",
    value: 50
}, {
    name: "bar",
    value: 80
}, {
    name: "baz",
    value: 20
}];

var xScale = d3.scaleBand()
    .range([0, w])
    .domain(data.map(function(d) {
        return d.name
    }))
    .paddingInner(0.4)
    .paddingOuter(0.2);

var xAxis = d3.axisBottom(xScale);

var bars = svg.selectAll(".bars")
    .data(data)
    .enter()
    .append("rect");

bars.attr("x", function(d) {
        return xScale(d.name)
    })
    .attr("width", xScale.bandwidth())
    .attr("y", function(d) {
        return (h - padding) - d.value
    })
    .attr("height", function(d) {
        return d.value
    })
    .attr("fill", "teal")
    .on("mouseover", function(d, i) {
        var xPos = +d3.select(this).attr("x")
        var wid = +d3.select(this).attr("width");
        d3.select(this).attr("x", xPos - 10).attr("width", wid + 20);
    }).on("mouseout", function() {
        d3.select(this).attr("x", function(d) {
                return xScale(d.name)
            })
            .attr("width", xScale.bandwidth());
    });

var gX = svg.append("g")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

<script src="https://d3js.org/d3.v4.min.js"></script>

Answer 2

您可以尝试使用CSS转换属性，这样您就可以设置transform-origin: 50% 50%;，因此它们会从中心缩放，而不是在您看到的一个方向上缩放。

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

如何在D3中使鼠标悬停更大？

2 个答案: