score:1
Accepted answer
you are setting widths using a css style. this requires units (px, em, or %).
updated code:
<!doctype html>
<html>
<head>
<script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
<div id="chart"></div>
<script>
data = [100, 200, 400, 350];
d3.select("#chart")
.selectall("div")
.data(data)
.enter()
.append("div")
.style("height", "30px")
.style("width", function(d) {
return d / 2 + "px"
})
.style("background-color", "grey")
.transition()
.duration(2000)
.style("width", function(d) {
return d + "px";
})
.style("background-color", "blue");
</script>
</body>
</html>
Source: stackoverflow.com
Related Query
- Adding color dynamically to a multiple line chart but it is not working in d3.js
- D3 transition working on "background-color" but not on "width"
- d3 transition for transform translate not working for DIV
- D3 transition not working
- d3 v4 line chart transition not working
- D3.v4 Projection Transition not Working
- area chart with d3 is not rendering on jsp page but working fine with html
- Code working in console but not when loading website
- Tooltips not working on the initial plot but start working once the plot changes
- d3 svg elements on top of background color (but not content) of separate HTML element
- D3.js implements first stage of transition but not 2nd
- d3 file not working in chrome but works in firefox
- Transition not working
- jQuery .text() is working but not .html()
- d3 transition on tooltip not working
- D3.js v4 circle radius transition not working as expected
- width attribute not working with d3 style
- Transition on path in d3.js is not working
- d3.js Stacked Bar Chart working for one dataset but not the other
- D3 line chart legend not working with v3 but working with v2
- Dynamically updating datamaps fill color not working using variable as country key
- Transition In D3 Bar Graph Not Working
- D3 transition not working as intended
- d3 transition not working when triggered from mouseover/mouseout handler
- d3 js transition not working
- D3 Graph working in chromium, but not in other browsers
- D3 realtime graphing: slide from right&shift data as data length exceeds limit transition is not working
- D3 Transition not working as expected
- D3 General update pattern transition not working on pie chart
- D3 fill transition for heatmap not working
More Query from same tag
- d3v4 update creates duplicate element
- d3js simple donut chart not drawing path
- Center force directed layout after tick using root node (return to center)
- Using D3.JS and the sankey plugin in a require.js module
- Calculate absolute position for d3 graph nodes
- D3 V4 Sunburst diagram layout arc calculation
- Trying to make dynamic D3 Chart with Bar and Difference line/value
- Annotations with lines on D3 bar charts
- How to apply box-shadow effect on svg circle by changing svg filter element in D3 chart
- Convert div or svg to datauri
- make a simple pie chart directive with d3js
- Text element causing Rect element to recall mouseover event
- How to add progress bar inside a tree structure node or on mouse hover in D3
- d3.js, mapbox/leaflet and meteor - animations on maps
- Why subtract margins only add them back in when setting svg width
- D3 - create sets of features from JSON
- show/hide D3 element based on mouse in/mouse out
- Add links between gray nodes - Directed Graph Editor d3.js
- D3 area chart filling above the line
- Filter JavaScript Array Based on Multiple Values
- d3js add tag inside another tag
- Get d3.svg.symbol() center
- d3 beeswarm chart - modify to pyramid-shaped stacking
- How is data parsed in this 3D piechart?
- D3.js y-Axis time scale
- How to draw dots in the coordinates of slices in a d3 pie chart?
- JavaScript - D3 force layout highlight subtree
- Convert JSON tree data to nodes and links
- Place pie charts on nodes of force directed layout graph in D3
- d3.js map inset (zoom)