Я использую d3.js для графа. в какой-то момент я должен показать данные с некоторой специальной частью графика, например, если значения пересекают некоторую границу, тогда покажите эту часть с шаблоном заполнения. для более четкого изображения и изображения.
Я получаю прямоугольную часть, пересекающую границу, но как я могу заполнить ее этим шаблоном? любые трюки css или canvas?
Примечание: это изображение - пример, а не реальный
Как насчет этого:
JS
var svg = d3.select("body").append("svg");
svg
.append('defs')
.append('pattern')
.attr('id', 'diagonalHatch')
.attr('patternUnits', 'userSpaceOnUse')
.attr('width', 4)
.attr('height', 4)
.append('path')
.attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
.attr('stroke', '#000000')
.attr('stroke-width', 1);
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.style("fill", 'yellow');
svg.append("rect")
.attr("x", 0)
.attr("width", 100)
.attr("height", 100)
.attr('fill', 'url(#diagonalHatch)');
Результаты
Чтобы изменить цвет, будет просто, просто условный оператор if. Вот пример, который я использовал раньше:
svg.selectAll("dot")
.data(data)
.enter().append("circle")
.attr("r", 3.5)
.style("fill", function(d) { // <== Add these
if (d.close >= 50) {return "red"} // <== Add these
else { return "black" } // <== Add these
;}) // <== Add these
.attr("cx", function(d) { return x(d.date); })
.attr("cy", function(d) { return y(d.close); });
Чтобы добавить шаблон, будет немного больше задействован, поскольку сначала вам нужно добавить элемент defs в свой SVG, а затем добавить к нему свой шаблон.
//first create you SVG or select it
var svg = d3.select("#container").append("svg");
//then append the defs and the pattern
svg.append("defs").append("pattern")
.attr("width", 5)
.attr("height", 5);