如何在svg元素上添加和删除css类

时间:2015-03-18 07:00:13

标签: javascript css svg d3.js

我有一系列的svg圈子:

<svg id="pt124" class="marker aaa" style="left: 842.984px; top: 175.607px;"><circle style="fill: blue;" cy="10" fill="#CCCCCC" cx="10" r="4.5"></circle></svg>

<svg id="pt125" class="marker aaa" style="left: 553.565px; top: 106.903px;"><circle style="fill: blue;" cy="10" fill="#CCCCCC" cx="10" r="4.5"></circle></svg>

<svg id="pt126" class="marker aaa" style="left: 608.487px; top: 191.06px;"><circle style="fill: blue;" cy="10" fill="#CCCCCC" cx="10" r="4.5"></circle></svg>

我需要为这些对象添加一个“隐藏”类。 我尝试了几件事没有成功:

$("svg#"+data[i]['name']).attr("class", "marker aaa hide");

$("svg#"+data[i]['name']+" circle").setAttribute("visibility", "hidden");

$("#"+data[i]['name']).context.hidden = false;
我错过了什么? 如何将类添加到此? 感谢

2 个答案:

答案 0 :(得分:0)

如果你想在所有圈子中添加一个类,那么你需要像

这样的东西
 d3.selectAll("circle")
   .attr("class", "hide");

这相当于:

 d3.selectAll("circle")
   .classed("hide", true); 

虽然我不知道你具体使用d3.js的位置。您提供的代码使用jQuery语法($(a bunch of stuff))。

答案 1 :(得分:0)

尝试此操作添加课程: -

$("svg#"+data[i]['name'] + ' circle').attr("class", "hide");

如果要切换元素,可以执行以下操作: -

$("svg#"+data[i]['name'] + ' circle').toggle();