Коллективный разум needed.
Код участка генерации svg
window.d3 = d3.select(window.document);
var margin = {top: 40, right: 40, bottom: 50, left: 40},
width = 700 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
var x = d3.scale.ordinal()
.rangeRoundBands([ 0, width ], .4);
var y = d3.scale.linear()
.range([ height, 0 ], .1);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var svg = window.d3.select("body").append("svg")
.attr('xmlns', 'http://www.w3.org/2000/svg')
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
x.domain(userData.data.map(function (d) { return d.day; }));
y.domain([ 0, d3.max(userData.data, function (d) { return d.problems; }) ]);
let gradient = svg.append('defs').append('defs:linearGradient')
.attr('id', 'background')
.attr('x1', '0%')
.attr('y1', '0%')
.attr('x2', '100%')
.attr('y2', '0%');
gradient
.append('stop')
.attr('style', 'stop-color: rgb(33,189,188); stop-opacity: 1')
.attr('offset', '0%');
gradient
.append('stop')
.attr('style', 'stop-color: rgb(94,221,187); stop-opacity: 1')
.attr('offset', '100%');
svg.append("g")
.attr("style", "fill: #ffd862; color: #333")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.attr('x', -20)
.attr('y', -5)
.call(xAxis);
на выходе имеем
<defs>
<lineargradient id="background" x1="0%" y1="0%" x2="100%" y2="0%">
<stop style="stop-color: rgb(33,189,188); stop-opacity: 1" offset="0%"></stop>
<stop style="stop-color: rgb(94,221,187); stop-opacity: 1" offset="100%"></stop>
</lineargradient>
</defs>
В процесе генерации svg изображения теряется camelCase.