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

Only one SVG component rendered when calling a method twice

本文关键字：一个 SVG 组件 调用 方法 两次      更新时间：2023-09-26

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

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));
}

我一辈子都不明白为什么。根据控制台输出，所有步骤都已执行，因此事件似乎已正确重新设置。尽管如此，内部组件似乎不服从。

查看此小提琴

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

我只更改了一个名称：

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();

I、 就我个人而言，我不喜欢remove()，我只是重新绑定数据。

相关文章：