javascript - Format of data array in D3 bar chart, array of values into an array of objects -
i have simple interactive bar chart. mike bostock's http://bl.ocks.org/mbostock/3885304 tooltip on bar.
the 2d array elements have has format "word" string, frequency number in...
good,5 hello,4 bye,2 aloha,1 ...
i tried concatenating "letter:" , "frequency:" 2d array elements follow code. not working anyway. string concatenate casting frequency number string type. @ sure how work this.
is there way concatenate string number in array elements preserve type, of number?
or there way load data better current array array of objects??
i working files in future. arrays suggestions...
<pre> <!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"> <title> - bar chart demo</title> <script type='text/javascript' src='http://d3js.org/d3.v3.min.js'></script> <style type='text/css'> body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispedges; } .bar { fill: orange; } .bar:hover { fill: orangered ; } .x.axis path { display: none; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; } /* creates small triangle extender tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\25bc"; position: absolute; text-align: center; } /* style northward tooltips differently */ .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } </style> <script type='text/javascript'>//<![cdata[ window.onload=function(){ }//]]> </script> </head> <body> <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> <script> var margin = {top: 40, right: 20, bottom: 30, left: 40}, width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var formatpercent = d3.format(".0%"); 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") .tickformat(formatpercent); var tip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function(d) { return "<strong>frequency:</strong> <span style='color:red'>" + d.frequency + "</span>"; }) 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.call(tip); // new data variable. var data = [ {letter: "a", frequency: .08167}, {letter: "b", frequency: .01492}, {letter: "c", frequency: .02780}, {letter: "d", frequency: .04253}, {letter: "e", frequency: .12702}, {letter: "f", frequency: .02288}, {letter: "g", frequency: .02022}, {letter: "h", frequency: .06094}, {letter: "i", frequency: .06973}, {letter: "j", frequency: .00153}, {letter: "k", frequency: .00747}, {letter: "l", frequency: .04025}, {letter: "m", frequency: .02517}, {letter: "n", frequency: .06749}, {letter: "o", frequency: .07507}, {letter: "p", frequency: .01929}, {letter: "q", frequency: .00098}, {letter: "r", frequency: .05987}, {letter: "s", frequency: .06333}, {letter: "t", frequency: .09056}, {letter: "u", frequency: .02758}, {letter: "v", frequency: .01037}, {letter: "w", frequency: .02465}, {letter: "x", frequency: .00150}, {letter: "y", frequency: .01971}, {letter: "z", frequency: .00074} ]; // following code contained in callback function. x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xaxis); svg.append("g") .attr("class", "y axis") .call(yaxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 6) .attr("dy", ".71em") .style("text-anchor", "end") .text("frequency"); svg.selectall(".bar") .data(data) .enter().append("rect") .attr("class", "bar") .attr("x", function(d) { return x(d.letter); }) .attr("width", x.rangeband()) .attr("y", function(d) { return y(d.frequency); }) .attr("height", function(d) { return height - y(d.frequency); }) .on('mouseover', tip.show) .on('mouseout', tip.hide) function type(d) { d.frequency = +d.frequency; return d; } </script> </body> </html> </pre> this section has changed array format:
// new data variable. var data = [ {letter: "a", frequency: .08167}, {letter: "b", frequency: .01492}, {letter: "c", frequency: .02780}, {letter: "d", frequency: .04253}, {letter: "e", frequency: .12702}, {letter: "f", frequency: .02288}, {letter: "g", frequency: .02022}, {letter: "h", frequency: .06094}, {letter: "i", frequency: .06973}, {letter: "j", frequency: .00153}, {letter: "k", frequency: .00747}, {letter: "l", frequency: .04025}, {letter: "m", frequency: .02517}, {letter: "n", frequency: .06749}, {letter: "o", frequency: .07507}, {letter: "p", frequency: .01929}, {letter: "q", frequency: .00098}, {letter: "r", frequency: .05987}, {letter: "s", frequency: .06333}, {letter: "t", frequency: .09056}, {letter: "u", frequency: .02758}, {letter: "v", frequency: .01037}, {letter: "w", frequency: .02465}, {letter: "x", frequency: .00150}, {letter: "y", frequency: .01971}, {letter: "z", frequency: .00074} ]; // following code contained in callback function. x.domain(data.map(function(d) { return d.letter; })); y.domain([0, d3.max(data, function(d) { return d.frequency; })]);
Comments
Post a Comment