Problem with coloring table cells in d3 v4

30 views
Skip to first unread message

Jim Gwilliam

unread,
Aug 26, 2016, 10:10:30 AM8/26/16
to d3-js
I've recently been trying to upgrade my code of several d3.js things I've written a long time ago to be compatible with the newer version 4 of d3.js.

One of my modules uses the .attr("bgcolor",....) to set and dynamically color individual cells in an html table to change in accordance with the value of a number in the cell.  After upgrading to version 4 of d3.js, I had to change a few syntax things, and mostly have the format displaying, but I can't get the colors to function at all.  I've explored all the colorspaces (hsl, rgb, etc.), and all of them consistently display really dark colors.

One thing that has me worried is this, which says that setting "bgcolor" for a <td> element is not supported in html5.  Not sure if that applies here or not, but is this method of applying a "bgcolor" attribute to <td> cells no longer a valid one?

Here is how the module functions properly using d3 v3.  Any ideas how I would modify this module to work properly with v4?  

Any help would be greatly appreciated. 

Mike Bostock

unread,
Aug 26, 2016, 10:21:12 AM8/26/16
to d3...@googlegroups.com
The problem is likely that the default string format of colors changed in v4 from hexadecimal #123456 to rgb(18, 52, 86) or rgba(18, 52, 86, 1.0) to be consistent with CSSOM and to allow opacity.

https://github.com/d3/d3-color/releases/v1.0.0

The deprecated bgcolor attribute only supports 6-digit hexadecimal colors or one of 16 color names. I’d use td.style("background-color", …) instead.

Jim Gwilliam

unread,
Aug 28, 2016, 10:47:03 AM8/28/16
to d3-js, mi...@ocks.org
Thank you.  This perfectly solved the problem.
Reply all
Reply to author
Forward
0 new messages