[英]Class not being applied by JQuery
I am trying to modify a custom nvd3 chart on a page. 我正在尝试修改页面上的自定义nvd3图表。 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是:
.hiddenClass {
opacity: 0 !important;
visibility: hidden !important;
}
The generated HTML: 生成的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. 但是,这似乎不起作用-但是,如果在检查器中添加这些属性,则轴将消失。
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. 当涉及到SVG-Elements时,有时可以使用D3.selection代替jQuery解决此问题。 Maybe take a look at D3 API for selection.classed
也许看看D3 API进行选择。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.