How do I number the lines if there is such a json

var json = [{"Id":0,"svgId":"svg11","svgRow":1,"svgX":0,"svgY":0,"svgCol":1},{"Id":0,"svgId":"svg12","svgRow":1,"svgX":0,"svgY":70,"svgCol":2},{"Id":0,"svgId":"svg13","svgRow":1,"svgX":0,"svgY":140,"svgCol":3},{"Id":0,"svgId":"svg14","svgRow":1,"svgX":0,"svgY":210,"svgCol":4},{"Id":0,"svgId":"svg15","svgRow":1,"svgX":0,"svgY":280,"svgCol":5},{"Id":0,"svgId":"svg16","svgRow":1,"svgX":0,"svgY":350,"svgCol":6},{"Id":0,"svgId":"svg17","svgRow":1,"svgX":0,"svgY":420,"svgCol":7},{"Id":0,"svgId":"svg18","svgRow":1,"svgX":0,"svgY":490,"svgCol":8},{"Id":0,"svgId":"svg19","svgRow":1,"svgX":0,"svgY":560,"svgCol":9},{"Id":0,"svgId":"svg21","svgRow":2,"svgX":70,"svgY":0,"svgCol":1},{"Id":0,"svgId":"svg22","svgRow":2,"svgX":70,"svgY":70,"svgCol":2},{"Id":0,"svgId":"svg23","svgRow":2,"svgX":70,"svgY":140,"svgCol":3},{"Id":0,"svgId":"svg24","svgRow":2,"svgX":70,"svgY":210,"svgCol":4},{"Id":0,"svgId":"svg25","svgRow":2,"svgX":70,"svgY":280,"svgCol":5},{"Id":0,"svgId":"svg26","svgRow":2,"svgX":70,"svgY":350,"svgCol":6},{"Id":0,"svgId":"svg27","svgRow":2,"svgX":70,"svgY":420,"svgCol":7},{"Id":0,"svgId":"svg28","svgRow":2,"svgX":70,"svgY":490,"svgCol":8},{"Id":0,"svgId":"svg29","svgRow":2,"svgX":70,"svgY":560,"svgCol":9},{"Id":0,"svgId":"svg31","svgRow":3,"svgX":140,"svgY":0,"svgCol":1},{"Id":0,"svgId":"svg32","svgRow":3,"svgX":140,"svgY":70,"svgCol":2},{"Id":0,"svgId":"svg33","svgRow":3,"svgX":140,"svgY":140,"svgCol":3},{"Id":0,"svgId":"svg34","svgRow":3,"svgX":140,"svgY":210,"svgCol":4},{"Id":0,"svgId":"svg35","svgRow":3,"svgX":140,"svgY":280,"svgCol":5},{"Id":0,"svgId":"svg36","svgRow":3,"svgX":140,"svgY":350,"svgCol":6},{"Id":0,"svgId":"svg37","svgRow":3,"svgX":140,"svgY":420,"svgCol":7}]

and that's how I make a set of squares

 d3.json(url, function(json) { var canvas = d3.selectAll("#test") .append("svg") .attr("id", "svg1") .attr("width", 1000) .attr("height", 800); var rects = canvas .append('g') .selectAll('rect') .data(json) .enter() .append('rect', '1') .attr({ 'x': function(data, index) { return data.svgX; }, 'y': function(data, index) { return data.svgY; }, 'id': function(data, index) { return data.svgId }, 'width': function(data, index) { return 50 }, 'height': function(data, index) { return 50 }, 'fill': function(data, index) { return '#006699' }, }) })

but how to put the line number first on each line?

    1 answer 1

    As you know, d3 stands for "Data-Driven Documents". The data controls the document. Accordingly, you first need to put your data in order. Put the data in a two-dimensional array, in which each child array contains data only of this string.

     var rows = d3.max(json, row => row.svgY) / STEP + 1; var data = Array.apply(null, new Array(rows)).map(() => []); json.forEach(row => { rowBasesJson[row.svgY / STEP].push(row); })

    And now it’s small - just display the data correctly.

     var json = [{"Id":0,"svgId":"svg11","svgRow":1,"svgX":0,"svgY":0,"svgCol":1},{"Id":0,"svgId":"svg12","svgRow":1,"svgX":0,"svgY":70,"svgCol":2},{"Id":0,"svgId":"svg13","svgRow":1,"svgX":0,"svgY":140,"svgCol":3},{"Id":0,"svgId":"svg14","svgRow":1,"svgX":0,"svgY":210,"svgCol":4},{"Id":0,"svgId":"svg15","svgRow":1,"svgX":0,"svgY":280,"svgCol":5},{"Id":0,"svgId":"svg16","svgRow":1,"svgX":0,"svgY":350,"svgCol":6},{"Id":0,"svgId":"svg17","svgRow":1,"svgX":0,"svgY":420,"svgCol":7},{"Id":0,"svgId":"svg18","svgRow":1,"svgX":0,"svgY":490,"svgCol":8},{"Id":0,"svgId":"svg19","svgRow":1,"svgX":0,"svgY":560,"svgCol":9},{"Id":0,"svgId":"svg21","svgRow":2,"svgX":70,"svgY":0,"svgCol":1},{"Id":0,"svgId":"svg22","svgRow":2,"svgX":70,"svgY":70,"svgCol":2},{"Id":0,"svgId":"svg23","svgRow":2,"svgX":70,"svgY":140,"svgCol":3},{"Id":0,"svgId":"svg24","svgRow":2,"svgX":70,"svgY":210,"svgCol":4},{"Id":0,"svgId":"svg25","svgRow":2,"svgX":70,"svgY":280,"svgCol":5},{"Id":0,"svgId":"svg26","svgRow":2,"svgX":70,"svgY":350,"svgCol":6},{"Id":0,"svgId":"svg27","svgRow":2,"svgX":70,"svgY":420,"svgCol":7},{"Id":0,"svgId":"svg28","svgRow":2,"svgX":70,"svgY":490,"svgCol":8},{"Id":0,"svgId":"svg29","svgRow":2,"svgX":70,"svgY":560,"svgCol":9},{"Id":0,"svgId":"svg31","svgRow":3,"svgX":140,"svgY":0,"svgCol":1},{"Id":0,"svgId":"svg32","svgRow":3,"svgX":140,"svgY":70,"svgCol":2},{"Id":0,"svgId":"svg33","svgRow":3,"svgX":140,"svgY":140,"svgCol":3},{"Id":0,"svgId":"svg34","svgRow":3,"svgX":140,"svgY":210,"svgCol":4},{"Id":0,"svgId":"svg35","svgRow":3,"svgX":140,"svgY":280,"svgCol":5},{"Id":0,"svgId":"svg36","svgRow":3,"svgX":140,"svgY":350,"svgCol":6},{"Id":0,"svgId":"svg37","svgRow":3,"svgX":140,"svgY":420,"svgCol":7}] const STEP = 70; const ROW = 50; const COLOR = '#006699'; var rows = d3.max(json, row => row.svgY) / STEP + 1; var data2x = Array.apply(null, new Array(rows)).map(() => []); json.forEach(row => { data2x[row.svgY / STEP].push(row); }) var svg = d3.selectAll("#test") .append("svg") .attr("width", 500) .attr("height", 600) ; var gEnter = svg .selectAll('g.row') .data(data2x) .enter() .append('g') .attr('class', 'row') ; gEnter .append('text') .attr('class', 'row-number') .attr('x', ROW / 2) .attr('y', (d, i) => i*STEP + STEP / 2) .text((d, i) => i) ; gEnter .each(function(d) { d3.select(this) .selectAll('rect.item') .data(d) .enter() .append('rect') .attr('class', 'item') .attr({ 'x': d => d.svgX + STEP, 'y': d => d.svgY, 'id': d => d.svgId, 'width': ROW, 'height': ROW, 'fill': COLOR }) }) 
     body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .chart { border: 1px solid magenta; } 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> <div id="test" class="chart"></div>

    Each line we put in a separate container g . And d3 kindly gives us the number of each child array. We use this and in each container g create a text node with the line number. Well, then go through each array and create squares.