how to highlight over lap beetween rectangles in d3 js

Question

I have implemented Gantt Chart using https://github.com/dk8996/Gantt-Chart . I have data in which i have conflicts in rectangles, ex. One task is from 12:00 to 14:00 and another is 13:00 to 15:00.

I want to highlight this conflict, i tried using this link ( http://bl.ocks.org/mbostock/3231298 ) but it is about avoiding collision where as i want to show them using strikes.

How to highlight the collisions with any texture?

Answer 1

Have you solved this yet? I simple but nice solution might be to use opacity. You can do that in css with

.bar {
    fill-opacity:0.5;
}

What this will do is make your bars a lighter colour and when they overlap, that region will become darker. You can experiment with the value from 0 (see-through)-1(what you have now).