custom diagonal background texture - d3.js

Question

I am trying to create a background texture rectangle block behind the charts blue rectangles. I need to create a pattern block and apply it to the fill for the grey rectangles
https://jsfiddle.net/aLh9d51t/
I currently have a solid block
but need to add a texture like this
https://iros.github.io/patternfills/sample_d3.html
var def = svg.append('defs').attr("height", 10).attr("width", 10).append('pattern')
I have to create this def
<svg height="10" width="10" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <pattern id="diagonal-stripe-1" patternUnits="userSpaceOnUse" width="10" height="10"> <image xlink:href="data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==" x="0" y="0" width="10" height="10"> </image> </pattern> </defs> </svg>
var itemRects2 = main.append('g').attr('clip-path', 'url(#clip)');
var itemRects = main.append('g').attr('clip-path', 'url(#clip)');
var currentLine = main
.append('line')
.attr('class', 'currentLine')
.attr('clip-path', 'url(#clip)');
var brush = d3
.brushX()
.extent([
[0, 0],
[w, miniHeight],
])
.on('brush', brushed);
mini.append('g')
.attr('class', 'x brush')
.call(brush)
.call(brush.move, x1.range());
function getXAxisTop(tTick, tFormat) {
return d3
.axisBottom(xTop)
.ticks(d3[tTick])
.tickFormat(d => d3.timeFormat(tFormat)(d));
}
function toDays(d) {
d = d || 0;
return d / 24 / 60 / 60 / 1000;
}
function toUTC(d) {
if (!d || !d.getFullYear) return 0;
return Date.UTC(d.getFullYear(), d.getMonth(), d.getDate());
}
function daysBetween(d1, d2) {
return toDays(toUTC(d2) - toUTC(d1));
}
function drawBrush(minExtent, maxExtent) {
var visItems = items.filter(function(d) {
return d.starting_time < maxExtent && d.ending_time > minExtent;
});
var days = daysBetween(minExtent, maxExtent);
console.log('days', days);
/*
function timeFormat(formats) {
return function(date) {
var i = formats.length - 1, f = formats[i];
while (!f[1](date)) f = formats[--i];
return d3.functor(f[0])(date);
};
}*/
/*
var customTimeFormat = timeFormat([
["00:00", function () { return true; }],
["06:00", function (d) { return 3 <= d.getHours() && d.getHours() < 9; }],
["12:00", function (d) { return 9 <= d.getHours() && d.getHours() < 15; }],
["18:00", function (d) { return 15 <= d.getHours() && d.getHours() < 21; }]
]);
*/
var tFormat1 = '%Y-%m';
var tTick1 = 'timeMonth';
//var tFormat2 = '%H%M';
//var tTick2 = 'timeHour';
if (days < 40) {
tFormat1 = '%Y-%m-%d';
tTick1 = 'timeWeek';
}
if (days <= 7) {
tFormat1 = '%Y-%m-%d';
tTick1 = 'timeDay';
}
if (days <= 1) {
tFormat1 = '%H%M';
tTick1 = 'timeHour';
//tFormat2 = '%H%M';
//tTick2 = customTimeFormat;
//console.log("CUSTOM FORMAT", customTimeFormat)
}
var toolTipDateFormat = d3.timeFormat('%Y-%m');
x1.domain([minExtent, maxExtent]);
xTop.domain([minExtent, maxExtent]);
gXTop.call(getXAxisTop(tTick1, tFormat1));
gXTop.selectAll('.tick text');
//gXTop2.call(getXAxisTop(tTick2, tFormat2));
//gXTop2.selectAll('.tick text');
currentLine
.attr('x1', x1(now))
.attr('x2', x1(now))
.attr('y1', 0)
.attr('y2', mainHeight);
//update main item rects
var rects = itemRects
.selectAll('rect')
.data(visItems, function(d) {
return d.id;
})
.attr('x', function(d) {
return x1(d.starting_time);
})
.attr('width', function(d) {
return x1(d.ending_time) - x1(d.starting_time);
});
rects
.enter()
.append('rect')
.attr('class', function(d) {
return 'miniItem';
})
.attr('x', function(d) {
return x1(d.starting_time);
})
.attr('y', function(d) {
return y1(d.lane + gutter);
})
.attr('width', function(d) {
return x1(d.ending_time) - x1(d.starting_time);
})
.attr('height', function(d) {
return y1(1 - 2 * gutter);
})
.on('mouseover', function(d) {
tooltipTimeline
.transition()
.duration(200)
.style('opacity', 0.9);
tooltipTimeline
.html(
'Start Time ' +
toolTipDateFormat(d.starting_time) +
'<br>' +
'End Time ' +
toolTipDateFormat(d.ending_time),
)
.style('left', d3.event.pageX + 'px')
.style('top', d3.event.pageY - 28 + 'px');
})
.on('mouseout', function(d) {
tooltipTimeline
.transition()
.duration(500)
.style('opacity', 0);
});
rects.exit().remove();
//textured blocks
console.log("w", w);
//update main item rects
var backRects = itemRects2
.selectAll('rect')
.data(visItems, function(d) {
return d.id;
})
.attr('x', function(d) {
return 0;
})
.attr('width', function(d) {
return w;
})
.attr('fill', function(d) {
return "grey";
});
backRects
.enter()
.append('rect')
.attr('class', function(d) {
return 'miniItem2';
})
.attr('x', function(d) {
return 0;
})
.attr('y', function(d) {
return y1(d.lane + gutter);
})
.attr('width', function(d) {
return w;
})
.attr('height', function(d) {
return y1(1 - 2 * gutter);
})
.attr('fill', function(d) {
return "grey";
});
// backRects.exit().remove();
//textured block
}
something like this.
chart.append("defs").append("pattern")
.attr('id','diagonal-stripe-1')
.attr("width", 10)
.attr("height", 10)
.attr('patternUnits',"userSpaceOnUse")
.append('image')
.attr('xlink:href','data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+CiAgPHJlY3Qgd2lkdGg9JzEwJyBoZWlnaHQ9JzEwJyBmaWxsPSd3aGl0ZScvPgogIDxwYXRoIGQ9J00tMSwxIGwyLC0yCiAgICAgICAgICAgTTAsMTAgbDEwLC0xMAogICAgICAgICAgIE05LDExIGwyLC0yJyBzdHJva2U9J2JsYWNrJyBzdHJva2Utd2lkdGg9JzEnLz4KPC9zdmc+Cg==')
.attr('x',0)
.attr('y',0)
.attr("width", 10)
.attr("height", 10);
but how do I make it closer to the design -- custom image?
//update main item rects
var backRects = itemRects2
.selectAll('rect')
.data(visItems, function(d) {
return d.id;
})
.attr('x', function(d) {
return 0;
})
.attr('width', function(d) {
return w;
})
.attr('fill', function(d) {
//return "grey";//'diagonal-stripe-1'
return "url(#diagonal-stripe-1)";
});