d3.js 矩形行中的行号

Question

而且我不知道如何在此输入方法中添加文本这是我的 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}]

然后我在我的页面中创建了矩形

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'
                    },                       

                })

})

如何在每一行前设置行号？我想在每一行之前添加文本或 div？但是怎么办？谢谢

Answer 1

向每一行添加列首先根据行对所有 json 数据进行分组，如下所示

var rows = d3.nest().key(function (d) {
    return d.svgCol;//grouping on basis of svgCol
}).rollup(function (d) {
    return d3.max(d, function (l) {
        return l.svgY;//returning the Y of each row
    });
}).entries(json);//json is the full dataset.

这将生成以下内容JSON

    [{"key":"1","values":0},{"key":"2","values":70},
{"key":"3","values":140},{"key":"4","values":210},
{"key":"5","values":280},{"key":"6","values":350},
{"key":"7","values":420},{"key":"8","values":490},
{"key":"9","values":560}]

使用上面的 JSON 使文本像这样：

canvas.append('g')
    .selectAll('text')
    .data(rows)
    .enter()
    .append("text")
    .attr({
    'x': function (data, index) {
        return 0;
    },
        'y': function (data, index) {
        return data.values + 10;
    }
}).text(function (d) {
    return d.key;
})

完整的工作代码here

希望对您有所帮助！

d3.js 矩形行中的行号

d3.js line numbers in rows of rects

svg

rect

d3.js