Javascript 使用d3选择rect元素时出现问题

我有一个面板开发问题。该面板为当前读数生成条形图，并为下限和上限绘制线条。这很有效。现在我想给它画一个亮点。我首先在实际图形下面的一个单独的div元素中绘制这个小火花

在图中，我有两个rect元素，一个用于背景，一个用于实际条。我现在的目标是确定background rect元素的大小，然后将这个大小指定给我的div，然后将它放在图形上

但问题是我无法访问rect元素（只是找不到它）

希望我的问题可以理解。我做错了什么

以下是代码片段：

  ...

  var panelID = "dd-multistat-panel-" + id;
  var tooltipDivID = "dd-multistat-panel-tooltip-" + id;
  var RectBackID = "dd-multistat-panel-back-" + id;
  var RectBackClass = "dd-multistat-panel-back-" + id;
  var RectBarID = "dd-multistat-panel-bar-" + id;

  ...

  // draw the background
      svg
        .append("g")
        //.attr("id", RectBackID)
        //.attr("class", RectBackClass)
        .selectAll("rect")
        .data(stripedata)
        .enter()
        .append("rect")
        .attr("id", RectBackID)
        .attr("class", RectBackClass)
        .attr("width", w)
        .attr("height", stripeScale.step())
        .attr("x", left)
        .attr("y", function (d) {
          return stripeScale(d);
        })
        .attr("fill", "rgba(0,0,0,0)")
        .attr("stroke", OutlineColor)
        .on("mouseover", function (d) {
          if (showTooltips || Links.length /* && i < data.length*/)
            tooltipShow(d);
        })
        .on("mouseleave", function () {
          if (!isInTooltip) {
            tooltipHide(false);
          }
        });

  ...

  //my seach code
  
  var BarClassID = "." + panelID;
  var PanelBackID = "#" + RectBackID;
  var PanelBackClass = "." + RectBackClass;
  
  console.log("var findBar = d3.select(" + BarClassID + ")");
  var findBar = d3.select(BarClassID);
  console.log(findBar.nodes());      // --> finds 1 svg
  
  console.log("var findRect = findBar.selectAll(" + PanelBackID + ")");
  var findRect = findBar.selectAll(PanelBackID);
  console.log(findRect.nodes());     // --> finds 0 elements

  console.log("var findRect2 = d3.selectAll(" + PanelBackID + ")");
  var findRect2 = d3.selectAll(PanelBackID);
  console.log(findRect2.nodes());     // --> finds 0 elements

  console.log("var findRect3 = d3.selectAll(" + PanelBackClass + ")");
  var findRect3 = d3.selectAll(PanelBackClass);
  console.log(findRect3.nodes());     // --> finds 0 elements

  console.log("var findRect4 = d3.selectAll(svg)");
  var findRect4 = d3.selectAll("svg");
  console.log(findRect4.nodes());     // --> finds 55 svg

  console.log("var findRect5 = d3.selectAll(g)");
  var findRect5 = d3.selectAll("g");
  console.log(findRect5.nodes());     // --> finds 0 elements

  console.log("var findRect6 = d3.selectAll(rect)");
  var findRect6 = d3.selectAll("rect");
  console.log(findRect6.nodes());     // --> finds 0 elements

。。。
var panelID=“dd多级面板-”+id；
var tooltipDivID=“dd多状态面板工具提示-”+id；
var RectBackID=“dd多级面板背面-”+id；
var RectBackClass=“dd多级面板背面-”+id；
var RectBarID=“dd多状态面板条-”+id；
...
//画背景
svg
.附加（“g”）
//.attr（“id”，RectBackID）
//.attr（“类”，RectBackClass）
.selectAll（“rect”）
.数据（条带数据）
.输入（）
.append（“rect”）
.attr（“id”，RectBackID）
.attr（“类”，RectBackClass）
.attr（“宽度”，w）
.attr（“高度”，stripeScale.step（））
.attr（“x”，左）
.attr（“y”，函数（d）{
返回条刻度（d）；
})
.attr（“填充”、“rgba（0,0,0,0）”）
.attr（“笔划”，大纲颜色）
.on（“鼠标悬停”，功能（d）{
如果（显示工具提示| | Links.length/*&&i找到1个svg
log（“var findRect=findBar.selectAll（“+PanelBackID+”））；
var findRect=findBar.selectAll（PanelBackID）；
console.log（findRect.nodes（））；//-->查找0个元素
log（“var findRect2=d3.selectAll（“+PanelBackID+”））；
var findRect2=d3.selectAll（PanelBackID）；
console.log（findRect2.nodes（））；//-->查找0个元素
log（“var findRect3=d3.selectAll（“+PanelBackClass+”））；
var findRect3=d3.selectAll（PanelBackClass）；
console.log（findRect3.nodes（））；//-->查找0个元素
log（“var findRect4=d3.selectAll（svg）”；
var findRect4=d3.selectAll（“svg”）；
console.log（findRect4.nodes（））；//-->找到55个svg
log（“var findRect5=d3.selectAll（g）”；
var findRect5=d3。选择全部（“g”）；
console.log（findRect5.nodes（））；//-->查找0个元素
log（“var findRect6=d3.selectAll（rect）”；
var findRect6=d3.selectAll（“rect”）；
console.log（findRect6.nodes（））；//-->查找0个元素

您不应该创建多个svg，而应该创建一个svg，并将条形图和spakrline附加到其中。 如果您坚持相同的逻辑，请尝试使用

d3选择

选择您的

rect

import * as d3Select from 'd3-selection';
d3Select.select('#your-rect-id');

这里有一些有用的链接-