javascript - d3 bar chart with custom x axis and bar width -

i want create bar chart custom bar width tried following code not aware if right way do.

also want update bar chart new data how can it?

to update tried - https://jsfiddle.net/eqr8deef/

var margin = {     top: 25,     right: 40,     bottom: 35,     left: 85   },   w = 500 - margin.left - margin.right,   h = 350 - margin.top - margin.bottom; var padding = 10;  var colors = {   0: ["local", "#377eb8"],   1: ["global", "#4daf4a"] };  var dataset = [{   "global": 1468604556084,   "local": 100, }, {   "local": 11500,   "global": 1313048950629 }, {   "local": 11500,   "global": 1213048950629 }, {   "local": 11500,   "global": 1113048950629 }, {   "local": 11500,   "global": 1123048950629 }, {   "local": 11500,   "global": 1013048950629 }];  var xscale = d3.scale.ordinal()   .domain(d3.range(dataset.length))   .rangeroundbands([0, w], 0.01); // ternary operator determine if global or local has larger scale var yscale = d3.scale.linear()   .domain([0, d3.max(dataset, function(d) {     return d.local;   })])   .range([h, 0]); var yaxis = d3.svg.axis()   .scale(yscale)   .orient("left")   .ticks(5);   var commaformat = d3.format(',');  //svg element var svg = d3.select("#searchvolume")   .append("svg")   .attr("width", w + margin.left + margin.right)   .attr("height", h + margin.top + margin.bottom)   .append("g")   .attr("transform", "translate(" + margin.left + "," + margin.top + ")");  // graph bars var sets = svg.selectall(".set")   .data(dataset)   .enter()   .append("g")   .attr("class", "set")   .attr("transform", function(d, i) {     return "translate(" + xscale(i) + ",0)";   });  sets.append("rect")   .attr("class", "global")   .attr("width", 20)   .attr("y", function(d) {     return yscale(d.local);   })   .attr("height", function(d) {     return h - yscale(d.local);   })   .attr("fill", colors[1][1])   .attr("font-family", "sans-serif")   .attr("font-size", "11px")   .attr("fill", "red");  // yaxis svg.append("g")   .attr("class", "y axis")   .attr("transform", "translate(0 ,0)")   .call(yaxis);    var ytextpadding = 20;  svg.selectall(".bartext") .data(dataset) .enter() .append("text") .attr("class", "bartext") .attr("text-anchor", "middle") .attr("fill", "black") .attr("x", function(d,i) {     console.log(i, xscale(i))     return xscale(i) + 10; }) .attr("y", function(d,i) {     return h + 15; }) .text(function(d){      return new date(d.global).getfullyear(); }); // xaxis label 

http://jsfiddle.net/pq0xrard/

to answer question step step -

• rangeroundbands used evenly space bars. if want have custom width can not use way using it.

• to update data can use enter-update-exit methods shown below.

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

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

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

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

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

here 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);     }); }