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（＆＃34; .Canvas＆＃34）。全选（＆＃34; SVG＆＃34）。全选（＆＃34; G＆＃34）。选择（＆＃34; .Y轴＆＃34;。）除去（）;

为什么代码不起作用？

Answer 1

这是一个小demo，有几个简单的方法（请参阅我在小提琴中的评论）。

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

请注意删除圈子后svg和g元素仍然存在的方式。

Answer 2

因为当您将class属性设置为y axis时，实际上设置了两个类。因此，为了选择和匹配两个类名，您需要使用select调用.y.axis。所以结果应该是：

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

至少为我工作，demo。

删除d3.js中svg的单个元素

2 个答案: