javascript - Elements appended to SVG with D3 are not appearing - Stack Overflow

admin管理员组

文章数量:1344966

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=".5.17/d3.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./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.

• javascript
• d3.js
• svg

Share Improve this question Follow edited Jun 26, 2019 at 17:04 Andrew Reid 38.3k77 gold badges7373 silver badges9090 bronze badges asked Mar 10, 2017 at 8:54 martinbshpmartinbshp 1,17344 gold badges2525 silver badges3737 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

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.

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/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/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/d3.v4.min.js"></script>

本文标签： javascriptElements appended to SVG with D3 are not appearingStack Overflow