卸下SVG的單一元素d3.js

Question

我在d3.js

var svg = d3.select(".Canvas").append("svg").attr(
      "width", width + margin.left + margin.right).attr("height", 
      height + margin.top + margin.bottom).append("g").attr(
      "transform", 
      "translate(" + margin.left + "," + margin.top + ")"); 


    svg.append("g").attr("class", "x axis").attr("transform", 
      "translate(0," + height + ")").call(xAxis); 

    svg.append("g").attr("class", "y axis").call(yAxisMajor).append("text") 
      .attr("transform", "rotate(-90)").attr("y", 6).attr("dy", 
        ".71em").style("text-anchor", "end"); 

以下代碼我嘗試以下只除去y軸，而不是整個SVG：

D3 .select（「。Canvas」）。selectAll（「svg」）。selectAll（「g」）。select（「.y axis」）。remove（）;

爲什麼代碼無法正常工作？

Answer 1

因爲當您將類屬性設置爲y axis時，您實際上設置了兩個類。因此，爲了選擇和匹配兩個類名稱，您需要撥打select與.y.axis。所以結果應該是：

d3.select(".canvas").selectAll("svg").selectAll("g").select(".y.axis").remove(); 

至少對我有效，demo。

Answer 2

這裏有一些demo與幾個簡單的方法來做到這一點（見我的小提琴的評論）。

d3.select("svg > g > #the_one_circle") 
    .transition().duration(1000) 
    .attr("r",1) 
    .remove(); 

注意svg和g元素如何仍然存在取出陣後。