score:0
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>
Source: stackoverflow.com
Related Query
- How to make a bar bigger on mouseover in D3?
- How to Make a bar chart with rounded corners with extended grid in d3.js?
- How to make Vertical corners on a Bar Chart?
- How to make grouped stacked bar chart in d3js?
- How to make a color gradient bar using d3js
- How to make unselected part of pie chart and bar grayed out?
- How to make a clickable transition bar graph to show 3 graphs in d3 v4?
- How to make a mouseover interactive line graph with multiple data series and 2 y axes?
- How to make dynamic Bar Chart in d3js with angularjs
- How to make this D3 horizontal bar chart work?
- How to make mouseover functionality permanent
- How to make a clickable transition bar graph in d3 v4?
- How can I make the legend's similar to the stacked bar chart (and change the legend's label) in D3 v6?
- How to make d3 bar chart bins' width resize properly on update?
- How do I change the colour of my d3.js Bar Graph bars individually and make a Scale for them?
- How do I make a tooltip show the amount in D3 grouped bar charts?
- How can I make a bar chart starting from the 0 point of the y axis and not from the bottom of the svg?
- How to make bar chart with additional vertical lines below the x axis
- How can I make a triple bar chart using D3?
- How do I make the height of a horizontal bar chart flexible in order to be resized when new data has been added in?
- How to make exit set on d3 stacked bar chart function properly?
- How to make axis label of stacked bar chart in the middle of ticks chart in D3?
- How do I make my bar chart's height be the data?
- How to make force layout graph in D3.js responsive to screen/browser size
- How can I make double click event on node in d3.js?
- d3.js - How can I set the cursor to hand when mouseover these elements on SVG container?
- How to make localization on months / days for D3js?
- How to make the dc.js charts responsive
- How do I make a custom axis formatter for hours & minutes in d3.js?
- How to make a d3 plugin?
More Query from same tag
- Bilevel Partition D3 create a simple 2 layer
- Why is scale only working the first time I doubleclick?
- d3 make a group draggable
- Color Specific Links on D3 Sankey Chart
- Can't highlight text in foreign object when d3 drag is attached
- Links stroke-width in threshold function for D3.js force-layout network
- Disable/Enable Buttons when clicked
- Capturing entire d3 graph when printing
- d3js multi-line scatterplot zoom
- Mouse Wheel Zoom Map - DataMaps.js
- Change color of selected li option with D3/JavaScript
- Updating D3 bubble radius with collide simulation
- d3.scale.category20() is returning same color
- D3js force simulation with specific targeted destination
- d3.js Sankey diagram: rectangles fill color
- I'm a bit stuck with array/object manipulation
- Labeled nodes, arrow on edges in D3.js
- d3.js rewriting zoom example in version4
- SVG to Canvas with d3.js
- D3: how to create input elements followed by label text?
- my .json file is not accessible from d3.json
- Add labels to bar in d3 chart
- Open html on click using data
- D3 easing function for animation between points
- Changing data for selected D3 object
- How to change the existing html text in a D3 rect?
- D3: Collision/overlap detection of circles in a generated view
- D3 returns no JSON objects
- How to map an array of objects correctly in Javascript
- Properly loading Template.templateName.rendered data context