Is it possible to customize fill color for each item inside the pattern ?

[devikanarmada]

No description provided.

[greenstick]

I'd like to add to this – trying to figure this out and it's unclear how to do this efficiently with D3.

Key reason why this is important is that color and texture offer two separate dimensions for visualization. As an example, in my current project, fill is defined by the color dimension, which is mapped to the legend in my visualizations, and textures will ideally be defined to correspond to an interactive filter dimension (i.e. we have filters that let the user interact with the data and subset it to get a drilled down view).

---

For any future folks, one current work around is to duplicate each element – in my case, I first render the color data element and then, using D3's element cloning method, render the textured element on top of it. Any event bindings are then applied to the textured element that's rendered on top of its corresponding colored element. It works, but duplicating each SVG node corresponding to a data element is a pretty DOM heavy and inefficient approach.

Key code below (for a stacked bar graph):

import textures from "textures";

// Setup Texture Scale & Map Object
self.texturescale = D3.scaleOrdinal().domain(self.filters).range(self.textures);
self.texturesMap = Object.fromEntries(
    new Map(self.textures.map((texture) => [
        texture, 
        textures
            .paths()
            .d(texture)
            .shapeRendering("geometricPrecision")
            .lighter()
            .thinner()
            .fill("transparent")
    ]))
 );  

// ... Other chart code

self.bargroups
    .selectAll("rect")
    .data((d) => d)
    .enter()
    .append("rect")
        .attr("id", (d) => `bar-${d.id}`)
        .attr("class", (d) => `bar`)
        .attr("x", (d) => self.x(d.from))
        .attr("y", (d) => self.y(d.group))
        .attr("width", (d) => self.x(d.to) - self.x(d.from))
        .attr("height", self.y.bandwidth())
        .attr("fill", (d) => self.texturesMap[self.textureScale(d.filter)]
        .attr("opacity", 0.7)
    .clone(true) // Clone Rect Element
        .attr("class", "bar interactable")
        .attr("fill", (d) => self.texturesMap[self.textureScale(d.filter).url()]
        .attr("opacity", 1.0)
    .on("mouseover", (e, d) => self.mouseOverBar(e, d))