用D3附加到SVG的元素未出現

Question

我正在嘗試使用D3顯示一些簡單的條形圖，其中每個條形都是div ，但是什么也沒有顯示。

 var chartData = [4, 8, 15, 16, 23, 42]; var body = d3.select('body'); var svg = body.append('svg') .attr("width",800) .attr("height",500); var div = svg.append('div').attr('class', '.chart'); for (var i = 0; i < chartData.length; i++) { div.append('div') .attr("height", 20) .attr("width", chartData[i]*10) .html(chartData[i]); } 

 .chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script> 

使用檢查SVG時，我看到了新創建的元素，並且svg被突出顯示，但內部div卻沒有。

Answer 1

簡而言之：您無法將HTML元素附加到SVG。 原因很簡單： <div> ， <p> ， <h1> ， <h2> ， <td> ， <li>等不是有效的SVG元素。

這已經被問過很多遍了。 但是，由於它的特定部分（通常不問），我想回答這個問題：

使用chrome的inspect時，我會看到新創建的元素。

是的，元素在那里。 但這並不意味着它將起作用。

讓我們在下面的代碼片段中展示它，其中我將<div>附加到SVG中。 查看console.log ，它顯示了SVG結構：

 var svg = d3.select("svg"); var data = d3.range(5); var divs = svg.selectAll("foo") .data(data) .enter() .append("div") .html("Where are you?") var mySVG = (new XMLSerializer()).serializeToString(svg.node()); console.log(mySVG) 

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg> 

您可以看到div位於DOM中。 但是，屏幕上沒有任何內容...

您看到DOM中的元素的事實沒有任何意義，因為您可以添加任何內容 ！

例如，讓我們附加一個名為CharlesDarwin的元素：

 var svg = d3.select("svg"); var data = d3.range(5); var divs = svg.selectAll("foo") .data(data) .enter() .append("CharlesDarwin") .html("I'm a strange tag!") var mySVG = (new XMLSerializer()).serializeToString(svg.node()); console.log(mySVG) 

 <script src="https://d3js.org/d3.v4.min.js"></script> <svg></svg> 

您可以在DOM中看到<charlesDarwin> 。 但是，很明顯，SVG中不會顯示任何內容。

PS ：關於您的圖表：

1. 擺脫循環。 使用D3時不需要。
2. 設置沒有點的類；
3. 如上所述，將div附加到主體。

這是工作代碼：

 var chartData = [4, 8, 15, 16, 23, 42]; var body = d3.select('body'); var div = body.selectAll("foo") .data(chartData) .enter() .append('div') .attr('class', 'chart') .style("width", d => d * 10 + "px") .html(d => d); 

 .chart { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } 

 <script src="https://d3js.org/d3.v4.min.js"></script>