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 for selection.classed

类没有被JQuery应用

1 个答案: