score:2

Accepted answer

Updated code: https://jsfiddle.net/5j2nw238/2/

Question 1: The width of the bars is determined by the width of the svg, as well as your given values for the scaleBand functions paddingInner, paddingOuter, and a few others.

https://github.com/d3/d3-scale/blob/master/README.md#band-scales

Take a look at the image describing these parameters. The point is to not hardcode the width of the bars like you did with .attr("width", 20);, and instead manipulate the scaleBand to find your desired look.

Question 2:

You did this correctly with the code

chart.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

But then on update, you remove the axis and didn't apply the transform again. Instead of deleting the axis and recreating it, simply update the axis scale with the new domain, and do chart.select(".x.axis").call(xAxis). This falls in line with the d3 way of thinking in a data driven fashion. Change your data, and let D3 handle the DOM.

Question 3:

The function name is forEach, not foreach. Also, you say you want to make sure the value is a string, but putting the + operator before a variable converts it to a number, not a string.


Related Query

More Query from same tag