用D3附加到SVG的元素未出现 [英] Elements appended to SVG with D3 are not appearing

问题描述

我正在尝试显示一些带有D3的简单条形图，其中每个条形为div，但是什么都没有显示.

I am trying to display some simple bar charts with D3 where each bar is a div, but nothing is being displayed.

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没有.

When using inspecting the SVG I see the newly created elements and the svg is highlighted but the inner divs are not.

推荐答案

简而言之:您不能将HTML元素附加到SVG.原因很简单:<div>，<p>，<h1>，<h2>，<td>，<li>等不是有效的SVG元素.

In a nutshell: you cannot append a HTML element to a SVG. The reason is simple: <div>, <p>, <h1>, <h2>, <td>, <li> and so on are not valid SVG elements.

这个问题已经被问了很多遍了.但是，由于它的特定部分(通常不问)，我想回答这个问题:

This has been asked and answered many, many times. However, I'd like to answer this question because of a specific part of it (which is normally not asked):

使用chrome的inspect时，我会看到新创建的元素.

When using chrome's inspect I see the newly created elements.

是的，元素在那里.但这并不意味着它将起作用.

Yes, the elements are there. But this doesn't mean it's going to work.

让我们在以下代码片段中显示此内容，在该代码片段中，我将<div>附加到SVG.看看console.log，它显示了SVG结构:

Let's show this in the following snippet, in which I'm appending <div>s to the SVG. look at the console.log, it shows the SVG structure:

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中.但是，屏幕上没有任何内容...

You can see that the divs are in the DOM. However, there is nothing on the screen...

您看到DOM中的元素这一事实没有任何意义，因为您可以附加任何内容！

The fact that you see the element in the DOM means nothing, because you can append anything!

例如，让我们附加一个名为CharlesDarwin的元素:

For instance, let's append an element named 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中什么也不会出现.

You can see <charlesDarwin> in the DOM. However, it's obvious that nothing will show up in the SVG.

PS :关于图表:

1. 摆脱掉for循环.使用D3时您不需要它；
2. 将课程设置为不带的点；
3. 如上所述，将div附加到主体上.

1. Get rid of that for loop. You don't need that when using D3;
2. Set the class without the dot;
3. Append the divs to the body, as discussed above.

这是工作代码:

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>

这篇关于用D3附加到SVG的元素未出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！