D3: Select SVG attribute and change it

Question

if I have an SVG...

var canvasBars = d3.select("#chart1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)    
.append("g")
.attr("transform", "translate("+margin.left+","+margin.top+")");

If I modify the width variable (used to calculate the width attribute) How do I then select the width attribute and modify it with this new width variable?

this does not seem to work:

canvasBars.attr("width", width + margin.left + margin.right);

Answer 1

Your other option is to ensure the former 'canvasBars' variable is actually the canvas.

var svgSelection = d3.select("#chart1").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)

var baseGroup = svgSelection.append("g")
.attr("transform", "translate("+margin.left+","+margin.top+")");

Your former 'canvasBars' I have renamed to 'svgSelection'. If you want to modify the "canvas" directly, your former idea will now work.

svgSelection.attr("width", width + margin.left + margin.right);