Question

我正在尝试在d3中的矩形内添加一些文本。

var state = svg.selectAll(".state")
            .data(data)
            .enter().append("g")
            .attr("class", "g")
            .attr("transform", function(d) {
                return "translate(" + x(d[columns[0]]) + ",0)";
            });
var count = 0;
    state.selectAll("rect")
            .data(function(d) {
                return d.val;
            })
            .enter().append("rect")
            .attr("width", x.rangeBand())
            .attr("y", function(d) {
                return y(d.y1);               <<<===== Line 1
            })
            .attr("height", function(d) {

                return y(d.y0) - y(d.y1);
            })
            .attr("x", function(d) {
                return x(d.x);                   <<<===== Line 2
            })
            .style("fill", function(d,i) {
            return colorSet(i);
            })
            .attr("id", function(d, i) {
                return col[i];
            })
            .attr("onclick", fun)
            .append("text")
            .attr("transform",function(d) {
                   var xvalue =x(d.x);         <<<===== Line 3
                    var yValue = y(d.y1);      <<<===== Line 4
                    return "translate(" + xvalue + ", " + yValue + ")";
                })
            .text("AAA");

首先，当我添加矩形时，我能够得到x和y位置x（d.x）和y（d.y1），正如第1行＆＃39;和＆＃39;第2行＆＃39;但当我再次尝试在第3行＆＃39;中获得x和y值时和＆＃39;第4行＆＃39;我的错误价值观。任何人都可以指出这个代码有什么问题??? 提前谢谢。

Answer 1

正如@Cool Blue所提到的，你不能在rect元素中附加文本元素，所以试试这段代码：

var state = svg.selectAll(".state")
        .data(data)
        .enter().append("g")
        .attr("class", "g")
        .attr("transform", function(d) {
            return "translate(" + x(d[columns[0]]) + ",0)";
        });
     var count = 0;
     state.selectAll("rect")
        .data(function(d) {
            return d.val;
        })
        .enter().append("rect")
        .attr("width", x.rangeBand())
        .attr("y", function(d) {
            return y(d.y1);              
        })
        .attr("height", function(d) {

            return y(d.y0) - y(d.y1);
        })
        .attr("x", function(d) {
            return x(d.x);                   
        })
        .style("fill", function(d,i) {
        return colorSet(i);
        })
        .attr("id", function(d, i) {
            return col[i];
        })
        .attr("onclick", fun);

 state.selectAll("text")
        .data(function(d) {
            return d.val;
        })
        .enter().append("text")
        .attr("transform",function(d) {
               var xvalue =x(d.x);         
                var yValue = y(d.y1);      
                return "translate(" + xvalue + ", " + yValue + ")";
            })
        .text("AAA");

无法在d3中获得x，y位置

1 个答案: