Bar colors reverting back to original colors

Question

I am using angularjs-nvd3-directives.

I have a need to color individual bars based on their values. I can do this with angularjs-nvd3-directives by using a callback that selects the bar and colors it after it is rendered.

<nvd3-multi-bar-chart
                data="vm.chartData"
                id="chartOne"
                width="400"
                height="550"
                showXAxis="true"
                showYAxis="true"
                noData="Charts not available"
                delay="2400"
                yAxisTickFormat="vm.yAxisTickFormatFunction()"
                forcey="[0,9]"
                callback="vm.colorFunction()"
                objectequality="true">
            <svg></svg>
        </nvd3-multi-bar-chart>

my selector in the callback function looks like this:

d3.selectAll("rect.nv-bar")
.style("fill", function(d, i){
    return d.y > 50 ? "red":"blue";
});

Overall, using angularjs-nvd3-directives has been nice and has saved me some time however using selectors to customize charts after they are rendered seems like a lot of work (color individual bars, color x/y axis, etc...).

The problem at hand is that when the window is resized, it reverts back to its original color of blue. Is there a way to preserve my updates to the bar? Do I need to write my own event for window.onresize (which I have tried and doesn't seem to work)?

Answer 1

As much as I didn't want to, I ended up writing my own directive for my charts and now I have complete control over the charts without having to write a ton of code to undo what angularjs-nvd3-directives did in a callback.