Class not being applied by JQuery

Question

I am trying to modify a custom nvd3 chart on a page. I need to make certain parts of the generated graph visible, and others not. I am using the following to try and hide/show things:

$(document).ready(function() {
//Puts date label under Modal Day, may have to do custom switch
$("#dateTag").html(new Date().toDateString());

//Hides X-axis bars
$('.nv-y.nv-axis').addClass('hiddenClass');
$('#title').addClass('hiddenClass');

});

Where hiddenClass is :

.hiddenClass {
opacity: 0 !important;
visibility: hidden !important;
}

The generated HTML:

<g class="nv-y nv-axis">
<g class="nvd3 nv-wrap nv-axis">
    <g>
        <g class="tick major" transform="translate(0,399.92266405380127)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">-25</text>
        </g>
        <g class="tick major" transform="translate(0,370.3333643089101)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">-20</text>
        </g>
        <g class="tick major" transform="translate(0,340.74406456401897)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">-15</text>
        </g>
        <g class="tick major" transform="translate(0,311.1547648191278)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">-10</text>
        </g>
        <g class="tick major" transform="translate(0,281.5654650742366)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">-5</text>
        </g>
        <g class="tick major" transform="translate(0,251.97616532934546)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">0</text>
        </g>
        <g class="tick major" transform="translate(0,222.3868655844543)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">5</text>
        </g>
        <g class="tick major" transform="translate(0,192.79756583956313)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">10</text>
        </g>
        <g class="tick major" transform="translate(0,163.208266094672)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">15</text>
        </g>
        <g class="tick major" transform="translate(0,133.6189663497808)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">20</text>
        </g>
        <g class="tick major" transform="translate(0,104.02966660488966)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">25</text>
        </g>
        <g class="tick major" transform="translate(0,74.4403668599985)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">30</text>
        </g>
        <g class="tick major" transform="translate(0,44.851067115107355)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">35</text>
        </g>
        <g class="tick major" transform="translate(0,15.261767370216205)" style="opacity: 1;">
            <line x2="1173" y2="0"></line>
            <text x="-10" dy=".32em" opacity="1" y="0" style="text-anchor: end;">40</text>
        </g>
        <path class="domain" d="M0,0H0V420H0"></path>
        <text class="nv-axislabel" transform="rotate(-90)" y="-63" x="-210" style="text-anchor: middle;"></text>
    </g>
    <g class="nv-axisMaxMin" transform="translate(0,420)">
        <text dy=".32em" y="0" x="-10" text-anchor="end" style="opacity: 1;">-28.39266831579298</text>
    </g>
    <g class="nv-axisMaxMin" transform="translate(0,0)">
        <text dy=".32em" y="0" x="-10" text-anchor="end" style="opacity: 1;">42.57893351681146</text>
    </g>
</g>

This however does not seem to work - however if I add these properties in the inspector, the axis will disappear.

Answer 1

try

d3.selectAll('.nv-y.nv-axis').classed('hiddenClass',true)

When it comes to SVG-Elements sometimes D3.selection instead of jQuery solves the problem. Maybe take a look at D3 API for selection.classed