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
- Simple function does not work within if-statement
- What's different between these two row conversion functions?
- Passing Data to D3.js Line Chart with Django Backend
- svg: Coordinates of a character?
- D3JS or Jquery: convert JSON string to integer
- setting d3 graph from inside of an anonymous function
- d3.js label graph edges [when edge values not numeric]
- Create multiple elements from object-as-data
- D3js - Binding Data to Multiple Donut Charts
- DC.js dynamically refresh charts to use updated dataset
- Find id from NVD3 Pie Chart
- d3.js. Spinning globe with bars
- d3 Pie Chart - Image on Outside Label
- Same data structure returned from javascript and python behaves differently in d3.js
- How to stop D3.js from creating infinite areas from linear polygons
- d3 treemap change color according to data passed in json
- D3 force directed uncaught type error
- Change and transition dataset in chord diagram with D3
- In D3 V4, how to use .ease("bounce") propertly?
- D3 - Updating and clearing chart's on click
- Using D3 to compute a spline for resampling
- Update: Changing the color of Negative Predetermined Value Using Javascript/Jquery
- I am using SVG style to apply the css property to an element. The code snippet is below:
- Animating circles getting clipped using D3.js with Ruby on Rails
- Comparison of D3 and Dojo GFX
- D3 Triggering drag during mousedown
- Inhibit mouse interactions for certain svg child elements
- c3 scatter plot - how can I give a point a name?
- D3- How do I draw dots on a multi line graph? (Iterate through array)
- Manipulate Google GeoChart SVG with D3