JQuery未應用類

Question

我正在嘗試修改頁面上的自定義nvd3圖表。 我需要使生成的圖形的某些部分可見，而其他部分則不可見。 我正在使用以下內容嘗試隱藏/顯示事物：

$(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');

});

其中hiddenClass是：

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

生成的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>

但是，這似乎不起作用-但是，如果在檢查器中添加這些屬性，則軸將消失。

Answer 1

嘗試

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

當涉及到SVG-Elements時，有時可以使用D3.selection代替jQuery解決此問題。 也許看看D3 API進行選擇。