javascript - How to display an array on text using d3? -

i using gridster library, , have gridster box created:

<li data-sizey="2" data-sizex="2" data-col="3" data-row="1">     <div class="gridster-box" id="box1">         <div class="handle-resize"></div>     </div> </li> 

in js file call json response back-end

function creategraph() {     d3.json("/hours", function (data){         // stuff here     } } 

the response, shown in console of browser, is

object {initial_hours: array[19]} initial_hours: array[19] 

where array contains:

0: 1800 1: 1700 2: 1030 3: 1130 4: 950 5: 1249 6: 1225 7: 1821 8: 1250 9: 1505 10: 38 11: 130 12: 1520 13: 1600 14: 1330 15: 1930 16: 1806 17: 1535 18: 1855 length: 19 

how print array text in gridster box?

your problem seems d3 problem, i.e. binding array of data dom element. below mock of json data , how can append data dom.

i've broken array data list 3 columns can play around adjusting x , y functions.

var svg = d3.select("svg");  var jsonresobj = {                initial_hours: [                   1800, 1700, 1030, 1130, 950, 1249, 1225, 1821, 1250,                   1505, 38, 130, 1520, 1600, 1330, 1930, 1806, 1535                 ]               };  var text = svg.selectall('text')     .data(jsonresobj.initial_hours)    .enter().append('text')     .attr("x", function(d,i){return 100 * (i % 3)})     .attr("y", function(d,i){return 20 * ( math.floor(i/3) ) })     .attr("fill", "#000")     .text(function(d){return d}); 

you should able same gridster selecting using id or class e.g.

var svg = d3.select("#box1"); 

here's fiddle of above.