svg 元素不显示

Question

在我的代码中，我附加了一个 'rect' 但由于某种原因它没有出现。我附加的 'rect' 在 DOM 中显示为：

这是我附加的 d3.js 摘录：

  var testRect = d3.selectAll(".altIndicator").append("rect")
    .attr("class", "testRect")
    .attr("x", -50)
    .attr("width", 20*x.rangeBand())
    .attr("y", -100)
    .attr("height", 425).style("fill", "black").style("opacity", 1);

没有显示的原因是什么？我在控制台中尝试运行以交互方式追加此追加，当我将其追加到其他任何地方时它会起作用，因此这似乎是一个继承问题。但是，通过显式设置样式，它应该覆盖从元素或 CSS 继承的样式值。

我的完整代码如下，附加在第 298-303 行。任何帮助将不胜感激。

https://gist.github.com/EE2dev/d1c86cc47ad2759d955e

Answer 1

它包含在不透明度为 0 的 g（altIndicator）中。

这里正在设置：

  d3.selectAll(".altIndicator")
    .each(function (d) { if (selectedItemSet.has(d) && selectedItemSet.get(d).alternativeId != 0) {
      d3.select(this).style("fill", "white")
        .style("opacity", 0.5);
      }
      else {
         d3.select(this).style("opacity", 0);
      }
    });

Code without that line.

svg 元素不显示

svg element does not show up

css

svg

d3.js