Trying to draw a bar chart in D3 and I am not seeing the output [duplicate] - html

Question

This question already has an answer here:
Cannot use attr with an object in D3 v4
(1 answer)
Closed 4 years ago.
I am learning D3 and trying to create a bar chart. I dont know why there is no output.
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 20, 12, 19];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr({
x: function(d, i) {
return i * w / dataset.length;
},
y: function(d) {
return h - d;
},
width: function(d) {
return (w / dataset.length) - padding;
},
height: function(d) {
return d;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>

Answer 1

The issue is that you are using d3v4, which does not let you set multiple attributes with selection.attr(). This functionality was present in d3v3, but removed starting with d3v4.
With d3v4/5 you can either:
use d3.selection-multi
set attributes one at a time
To keep almost the same code as you have, you can import d3.selection-multi, this allows you to use selection.attrs({}) (not .attr) to set multiple attributes at once:
.attrs({
x: function(d, i) {
return i * w / dataset.length;
},
y: function(d) {
return h - d;
},
width: function(d) {
return (w / dataset.length) - padding;
},
height: function(d) {
return d;
}
})
The module is not included in the base d3 library so you'll need to import it for this approach to work:
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 20, 12, 19];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attrs({
x: function(d, i) {
return i * w / dataset.length;
},
y: function(d) {
return h - d;
},
width: function(d) {
return (w / dataset.length) - padding;
},
height: function(d) {
return d;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
The other option is to use selection.attr() to set one attribute at a time, rather than all at once:
var w = 300;
var h = 100;
var padding = 2;
var dataset = [5, 10, 20, 12, 19];
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x",function(d, i) {
return i * w / dataset.length;
})
.attr("y",function(d) {
return h - d;
})
.attr("width", function(d) {
return (w / dataset.length) - padding;
})
.attr("height",function(d) {
return d;
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.10.0/d3.min.js"></script>