不确定为什么会出现此错误。当 JavaScript 在加载元素之前执行时，阅读问题的根源似乎存在，但在我的例子中，我在 body 标签上使用了 onload 函数。 JavaScript 也在 body 标签关闭之前。不确定是什么导致了这个问题。 **错误对应initLegend()函数的第二行
这是抛出错误的行
legendGroup = svgDoc.getElementById("legendGroup").childNodes;
代码
<body onload="init()">
<h1>Co2 Emissions</h1>
<div id="viz" style='margin-top: -5px;'></div>
<script type="text/javascript">
var changeArray = [-80,-60,-40,-20,0,20,40,60,80];
var colorArray = ["#053061", "#2166ac", "#4393c3", "#92c5de", "#F1F7FA", "#fddbc7", "#f4a582", "#d6604d", "#b2182b", "#67001f"];
var legend;
var legendGroup;
svgDoc = document;
var svg_0 = d3.xml("svg_drawing.svg", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
d3.select("#viz").node().appendChild(importedNode)});
function initLegend()
{
legend = svgDoc.getElementById("legend");
legendGroup = svgDoc.getElementById("legendGroup").childNodes;
// set text for headline
var node = legend.childNodes.item(1);
node.firstChild.nodeValue = currentMonth + currentYear;
node = node.nextSibling.nextSibling;
node.firstChild.nodeValue = legendHeadline;
node = node.nextSibling.nextSibling;
node.firstChild.nodeValue = legendLabelDecrease;
node = node.nextSibling.nextSibling;
node.firstChild.nodeValue = legendLabelIncrease1;
node = node.nextSibling.nextSibling;
node.firstChild.nodeValue = legendLabelIncrease2;
// set legend items
if(debug) { alert("legendGroup.length: " + legendGroup.length); }
var rectInvariant = 0;
var textInvariant = 0;
for(var i=0; i<legendGroup.length; i++)
{
if(legendGroup.item(i))
{
if(legendGroup.item(i).nodeName == "rect")
{
legendGroup.item(i).setAttribute("fill",colorArray[rectInvariant++]);
} else
{
if(legendGroup.item(i).nodeName == "text")
{
legendGroup.item(i).firstChild.nodeValue = changeArray[textInvariant++] + "%";
}
}
}
}
}
function init(){
initLegend()
};
</script>
</body>
</html>
SVG 和图例
<g id="legend" transform="matrix(1 0 0 1 685 28)">
<text id="legendHeadline" class="legendHeadline" x="87" y="-7">...</text>
<text id="legendSubheadline" class="legendSubheadline" x="95" y="-7">...</text>
<text id="decrease" class="legendLabel" x="-25" y="17">...</text>
<text id="increase1" class="legendLabel" x="379" y="10">...</text>
<text id="increase2" class="legendLabel" x="379" y="22">...</text>
<g id="legendGroup" transform="matrix(1 0 0 1 0 8)">
<rect x="0" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="35" y="27" class="legendStyle">...</text>
<rect x="35" y="0" width="35" height="10" stroke="#000000" stroke-width="1" fill="#FFFFFF" />
<text x="70" y="27" class="legendStyle">...</text>
<rect x="70" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="105" y="27" class="legendStyle">...</text>
<rect x="105" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="140" y="27" class="legendStyle">...</text>
<rect x="140" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="175" y="27" class="legendStyle">...</text>
<rect x="175" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="210" y="27" class="legendStyle">...</text>
<rect x="210" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="245" y="27" class="legendStyle">...</text>
<rect x="245" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="280" y="27" class="legendStyle">...</text>
<rect x="280" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
<text x="315" y="27" class="legendStyle">...</text>
<rect x="315" y="0" width="35" height="10" stroke="#000000" stroke-width="1px" fill="#FFFFFF" />
</g>
</g>
最佳答案
您只需将 initLegend() 调用移动到回调处理程序中，就在您追加它的位置之后。加载 SVG 是异步，窗口“加载”事件不会等待它完成。
像这样编辑:
var svg_0 = d3.xml("svg_drawing.svg", "image/svg+xml", function(xml) {
var importedNode = document.importNode(xml.documentElement, true);
d3.select("#viz").node().appendChild(importedNode);
initLegend();
});
关于javascript - 未捕获的类型错误 : Cannot read property 'childNodes' of null，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33618971/