d3v4：选择画笔手柄会破坏画笔功能

Question

我试图向brushY添加一些自定义功能。 目标是让画笔的范围在其各自的句柄上方/下方显示为文本。为实现此目的，我选择句柄[$n, $s] = [$brush.select(".handle--n"), $brush.select(".handle--s")]以获得各自的句柄。用于定位文本的属性。

但是，我发现通过选择句柄，画笔的功能拙劣 ...... 你失去了从把手上拖动，它们的宽度减小了，两个把手都沿着彼此相对的位置定位在画笔的顶部，而不是它们常规的北/南位置。

任何人都可以解释为什么简单的选择会导致这种DOM突变？

相关代码：

＆＃13;

＆＃13;

private plotBrushText($: d3Selection): d3Selection {
  const $brushHandleText = $.append("g").attr("class", "handle-text");
  $brushHandleText.append("text").attr("class", "handle-text--n");
  $brushHandleText.append("text").attr("class", "handle-text--s");
}

private updateBrushText(col: INumericalColumn): void {
  const [upperBound, lowerBound] = col.state.extents;
  const $col = d3.select(`[id="${col.name}"]`),
    $brush = $col.select(".brush"),
    $ticks = $col.selectAll(".tick"),
    //[$n, $s] = [$brush.select(".handle--n"), $brush.select(".handle--s")],
    //[nY, sY] = [attrY($n), attrY($s)],
    [nY, sY] = [120, 100],
    hideIf = x => x ? "hidden" : null,
    diffLessThan10 = fp.diff(nY, sY) < 10,
    updateText = (sel: string, y: number, txt: number) => $col.select(sel)
    .attr("y", y)
    .attr("x", $ticks.select("text").attr("x"))
    .text(txt.toFixed(2))
    .attr("visibility", hideIf(diffLessThan10));

  updateText(".handle-text--n", nY + 7, upperBound);
  updateText(".handle-text--s", sY - 7, lowerBound);
  $ticks.transition().duration(300).attr("visibility", hideIf(!diffLessThan10));
}

private plotColumns(columns: IColumn[]): d3Selection {
  return this.$$.selectAll(".column")
    .data(columns)
    .enter().append("g")
    .attr("id", c => c.name)
    .attr("class", c => `${c.type.toLowerCase()} column axis`)
    .attr("transform", c => `translate(${this.xScale(c.name)})`)
    .each(function(col: IColumn) {
      d3.select(this).call(d3.axisLeft(col.scale));
    }).call(this.plotBrushes.bind(this))
    .call(this.plotBrushText) // < -- Relevant code
    .call(this.plotAxisMenus.bind(this))
    .call(this.bindTickEvents.bind(this));
}

private createColumnBrushYGenerator(_objMethods): Brush {
  const {
    updatePathVisibility,
    fg,
    updateBrushText,
    updateExtentState,
    brushStart,
    _size
  } = _objMethods;

  return d3.brushY()
    .extent([
      [-8, 0],
      [8, _size.h]
    ])
    .on("start", brushStart)
    .on("brush", function(col) {
      updateExtentState(col);
      updateBrushText(col); // < -- Relevant code
      updatePathVisibility(fg);
    });
}

＆＃13;

＆＃13;

＆＃13;

注意我已经注释掉了选择，当没有选择时，画笔按预期工作。

以下是有/无选择的图像及其各自的视觉元素

选择完成后，

DOM。请注意，画笔句柄的y属性是相等的，它们不应该是。手柄的宽度也减少了。 没有选择的 DOM。请注意，在此实例中，画笔手柄的y属性是正确的，不同于选择rect元素的高度属性