d3 Version4 getting null object

Question

I'm trying to get d3 v4 to work basic simple rendering as v3 worked before, I'm getting null object. Here's a simple version of the code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.4.0/d3.min.js"></script>
<script>
    var dataset = [23, 45, 66, 77, 88, 99];
    var svg = d3.select("body").append("svg").attr({width: 500, height: 500});
    console.log('svg : '+svg);
</script>

Result of the above code is:

svg : null

Writing the same code with v3, the result

svg : [object SVGSVGElement]'

What am I missing here? I'm following the tutorials and most of them are in v3.

Answer 1

The attr function can take two arguments - the attribute name and the attribute value. Try this instead:

var dataset = [23, 45, 66, 77, 88, 99];
var svg = d3.select("body").append("svg")
    .attr("height", 500)
    .attr("width", 500);

console.log('svg : '+svg);