.chart div { font: 10px sans-serif; background-color: steelblue; text-align: right; padding: 3px; margin: 1px; color: white; } </style> <div class="chart"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var data = [1.19209289551e-05, 3.70760703087, 0.162719964981, 0.159816026688, 0.159816026688, 6.00016117096]; var x = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, 1024]); d3.select(".chart") .selectall("div") .data(data) .enter().append("div") .style("width", function(d) { return x(d) + "px"; }) .text(function(d) { return d; }); </script> based on code,i want add string text right of each bar. how it?
thanks!
<!doctype html> <meta charset="utf-8"> <style> .chart div { font: 12px sans-serif; background-color: steelblue; text-align: left; padding: 3px; margin: 1px; color: white; } </style> <div class="chart"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <script> var data = [1.19209289551e-05, 3.70760703087, 0.162719964981, 0.159816026688, 6.00016117096]; var data_tex = {1.19209289551e-05 :'getcurrentid' , 3.70760703087: 'initialize opk', 0.162719964981 :'getshareddata', 0.159816026688 :'setshareddata', 6.00016117096:'synchronize resource'}; var x = d3.scale.linear() .domain([0, d3.max(data)]) .range([0, 1024]); d3.select(".chart") .selectall("div") .data(data) .enter().append("div") .style("width", function(d) { return x(d)+ "px"; }) .append("div").text(function (d) {return data_tex[d] + ": " + d + "s";}).style("margin-left", function (d) {return x(d) + 3 + "px";}).style("background-color", "white").style("color", "brown");; </script> thanks jsbob, perfect me.
Comments
Post a Comment