使用 D3 附加到 SVG 的元素没有出现

问题描述

我正在尝试使用 D3 显示一些简单的条形图，其中每个条形都是一个 div，但没有显示任何内容.

var chartData = [4, 8, 15, 16, 23, 42];var body = d3.select('body');var svg = body.append('svg').attr("宽度",800).attr("高度",500);var div = svg.append('div').attr('class', '.chart');for (var i = 0; i 

.chart div {字体:10px 无衬线；背景颜色:钢蓝色；文本对齐:右；填充:3px；边距:1px；白颜色;}

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

当使用检查 SVG 时，我看到新创建的元素并且 svg 被突出显示，但内部 div 没有.

解决方案

简而言之:您不能将 HTML 元素附加到 SVG.原因很简单:

、

、

、

、、

等不是有效的 SVG 元素.

这个问题已经被问过很多次了.但是，我想回答这个问题，因为它有一个特定的部分(通常不会被问到):

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

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

让我们在以下代码段中展示这一点，其中我将 <div>s 附加到 SVG.查看 console.log，它显示了 SVG 结构:

var svg = d3.select("svg");var 数据 = d3.range(5);var divs = svg.selectAll("foo").data(数据).进入().append("div").html("你在哪里?")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 数据 = d3.range(5);var divs = svg.selectAll("foo").data(数据).进入().append("查尔斯达尔文").html("我是个奇怪的标签！")var mySVG = (new XMLSerializer()).serializeToString(svg.node());console.log(mySVG)

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

您可以在 DOM 中看到 .但是，很明显，SVG 中不会显示任何内容.

PS:关于您的图表:

1. 摆脱那个 for 循环.使用 D3 时不需要它；
2. 设置类没有点；
3. 将 div 附加到正文，如上所述.

这是工作代码:

var chartData = [4, 8, 15, 16, 23, 42];var body = d3.select('body');var div = body.selectAll("foo").data(图表数据).进入().append('div').attr('类', '图表').style("宽度", d => d * 10 + "px").html(d => d);

.chart {字体:10px 无衬线；背景颜色:钢蓝色；文本对齐:右；填充:3px；边距:1px；白颜色;}

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

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>

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

解决方案

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):

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

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>

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

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

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>

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

PS: Regarding your chart:

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.

This is the working code:

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 的元素没有出现的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！