兩次調用一個方法時僅呈現一個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() ，我只是簡單地重新綁定數據。