两次调用一个方法时仅呈现一个SVG组件

Question

我使用一个函数来为单击设置事件处理程序，并在单击时触发其渲染，渲染按预期进行（在外部控件上折叠，在内部控件上折叠）。 然后，再次单击它，将撤消该过程。 但是，下次执行该操作时，只有外部组件会更改其大小，而内部组件不会受到影响。

function pieClickOuter(target) {
  var pie = d3.layout.pie()
    .startAngle(0).endAngle(2 * Math.PI)
    .value(function (d) { return d.val; });
  var out = d3.svg.arc().innerRadius(90).outerRadius(99);
  var org = d3.svg.arc().innerRadius(1).outerRadius(1);
  var sub = d3.svg.arc().innerRadius(10).outerRadius(80));

  d3.selectAll("#chart .sector path")
    .transition().duration(1500).attr("d", out);

  var grx = _.chart.selectAll(".subSector")
    .data(pie(getData())).enter().append("g")
    .attr("class", "subSector")
    .on("click", pieClickInner);

  grx.append("path")
    .attr("d", org).style("fill", function (d) { return colors(d.value); });
  grx.selectAll("#chart .subSector path")
    .transition().duration(1000).attr("d", sub);
}

function pieClickInner() {
  d3.selectAll("#chart .sector path")
    .transition().duration(1500)
    .attr("d", d3.svg.arc().innerRadius(80).outerRadius(99));

  outerPieEvents(d3.selectAll("#chart .sector"));

  d3.selectAll("#chart .subSector path")
    .transition().duration(1000)
    .attr("d", d3.svg.arc().innerRadius(1).outerRadius(1));
}

我一生都看不到原因。 根据控制台输出，所有步骤均已执行，因此似乎事件已正确设置。 仍然，内部组件似乎不服从。

看到这个小提琴

Answer 1

我相信你想要这样的东西 。

我只更改了1个名称：

var grx = _.chart.selectAll(".subSector")

至

var grx = _.chart.selectAll(".foo")//or any other name

因此，我们不选择已经存在的内容。

这种方法的问题在于，您的SVG每次点击都会有越来越多的组。 但是您可以避免在pieClickInner()其删除：

d3.selectAll("#chart .subSector path")
    .transition().duration(1000)
    .attr("d", d3.svg.arc().innerRadius(1).outerRadius(1)).remove();
d3.selectAll("#chart .subSector text").attr("opacity", 0).remove();
d3.selectAll("g.subSector").transition().duration(1000).remove();

我个人不喜欢remove() ，我只是简单地重新绑定数据。