score:0

Accepted answer

you could try using the css transform property, this would allow you to set transform-origin: 50% 50%;, so they would scale from the center, rather than in one direction as you're seeing.

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

score:4

i advise you not to use an svg scale transform to make your bars bigger. the reason is simple: scale is centered at the origin (0,0) of the svg, which is the top left corner. because of this, any element that is not on that position (0,0) will seem to move (see my answer here: svg circle element jumps upon scale transform). that explains the behaviour you described:

the bar just shifts right or left and some bars on the extreme corner disappear instead of becoming larger in size.

that being said, i suggest you use a simple d3 function to change your bars. at this point your question is almost "too broad" for s.o. (because there are several ways to increase the bars on mouseover), but here is, for instance, an example which adds 10px at each side of the bar:

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

i'm increasing only the width of the bars because, as a dataviz designer, i believe that changing the height of the bars (which encodes information) is misleading to the user.

here is a demo:

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>


Related Query