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>
See Question&Answers more detail:os