D3过渡动画问题：background-color生效但width无动画效果

嘿，我一眼就揪出问题所在啦！你的条形图宽度没出现过渡动画，核心原因是CSS宽度值缺少单位。

你看，代码里设置宽度的时候写的是function(d){return d/2}和function(d){return d}，但浏览器识别CSS长度值必须要有明确的单位（比如px），没有单位的话，浏览器会把这个值判定为无效样式，自然没法触发过渡动画。而颜色是直接使用关键字（grey、blue），不需要单位，所以颜色过渡能正常生效。

修改后的代码应该是这样的：

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"}) // 给宽度值添加px单位
  .style("background-color","grey")
  .transition()
  .style("width", function(d){return d + "px"}) // 过渡目标宽度同样添加px单位
  .style("background-color","blue");

另外补个小建议：如果后续数据范围变化较大，最好用D3的比例尺（比如d3.scaleLinear()）来映射数据到宽度，这样能更灵活地适配容器大小，避免条形超出容器的情况～

内容的提问来源于stack exchange，提问作者Nino Filiu