score:2

Accepted answer

To answer your question step by step -

  • rangeRoundBands is used to evenly space your bars. But if you want to have custom width then you can not use it like the way you are using it.

  • to update the data you can simply use enter-update-exit methods as shown below.

var update_sel = svg.selectAll("circle").data(data)

update_sel.attr(/* operate on old elements only */)

update_sel.enter().append("circle").attr(/* operate on new elements only */)

update_sel.attr(/* operate on old and new elements */)

update_sel.exit().remove() /* complete the enter-update-exit pattern */

Here is a complete example - https://jsfiddle.net/seej4dfd/

var x = d3.scale.ordinal()
  .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
  .range([height, 0]);
var xAxis = d3.svg.axis()
  .scale(x)
  .orient("bottom");

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left")
  .ticks(10, "%");

var svg = d3.select("body").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 + ")");

svg.append("g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + height + ")")

function draw(data) {
  x.domain(data.map(function(d) {
    return d.letter;
  }));
  y.domain([0, d3.max(data, function(d) {
    return d.frequency;
  })]);


  var labels = svg
    .selectAll(".topLabel")
  .data(data, function(d) {
      return d.letter;
    });

labels
.exit()
.remove();

labels
  .enter()
  .append("text")
  .attr("class", "topLabel")
  .attr("text-anchor", "middle")
  .attr("fill", "black")

  labels
  .attr("x", function(d, i) {
    return x(d.letter) + 7.5;
  })
  .attr("y", function(d, i) {
    return y(d.frequency);
  })
  .text(function(d, i) {
    return d.letter;
  });


var labels = svg
    .selectAll(".bartext")
  .data(data, function(d) {
      return d.letter;
    });

labels
.exit()
.remove();

labels
  .enter()
  .append("text")
  .attr("class", "bartext")
  .attr("text-anchor", "middle")
  .attr("fill", "black");

  labels
  .attr("x", function(d, i) {
    return x(d.letter) + 7.5;
  })
  .attr("y", function(d, i) {
    return height + 15;
  })
  .text(function(d, i) {
    return d.letter;
  });

  svg.select(".y.axis").transition().duration(300).call(yAxis)

  var bars = svg.selectAll(".bar").data(data, function(d) {
      return d.letter;
    })
  bars.exit()
    .transition()
    .duration(300)
    .remove();

  bars.enter().append("rect")
    .attr("class", "bar");

  bars.transition().duration(300).attr("x", function(d) {
      return x(d.letter);
    })
    .attr("width", 15)
    .attr("y", function(d) {
      return y(d.frequency);
    })
    .attr("height", function(d) {
      return height - y(d.frequency);
    });
}

score:-1

To change the width, use the xScale.rangeBand() for setting the width of your rect on line 73.

http://jsfiddle.net/073u0ump/3/


Related Query

More Query from same tag