如何在svg元素上添加和刪除css類

Question

我有一系列的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;

我想念什么？ 我該如何添加課程呢？ 謝謝

Answer 1

如果您想向所有圈子添加一個班級，那么您需要

 d3.selectAll("circle")
   .attr("class", "hide");

這等效於：

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

雖然我看不到您在d3.js專門使用d3.js 您提供的代碼使用jQuery語法（ $(a bunch of stuff) ）。

Answer 2

嘗試添加該類：

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

如果要切換元素，可以執行以下操作：

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