Question

下面有一段代码用于绘制进度条，但不能附加如下图像的文字，矩形“E”的矩形“F”的开头和矩形的顶部/底部如下所示形象，我们如何可以通过给出x的负值来附加矩形的文本，但d3不会为此消耗负值。

    var self = this;
    var progressWidth = this.getInteger("progressWidth");
    var progressFill = this.getString("progressFill");
    var progressBarWidth = this.getInteger("progressBarWidth");
    var progressBarHeight = this.getInteger("progressBarHeight");
    var isRoundCorners = this.getBoolean("isRoundCorners");
    var backgroundFill = this.getString("backgroundFill");
    var roundedCorners = 0;
    var progressWidthValue = 0;

    if(!progressBarWidth) {
        progressBarWidth = 250;
    }
    if(!progressBarHeight) {
        progressBarHeight = 15
    }
    if(progressWidth) {
        progressWidthValue = (progressBarWidth * progressWidth)/100;
    }
    if(!progressFill) {
        progressFill = 'blue';
    }

    if(isRoundCorners) {
        roundedCorners = 10;
    } else {
        roundedCorners = 0;
    }
    if(!backgroundFill) {
        backgroundFill = '#D8D8D8';
    }


    var svg = args.svg;
    svg = svg
        .append('svg');
        // .attr('height', 100)
        // .attr('width', 500);


    svg.append('rect')
        .attr('class', 'bg-rect')
        .attr('rx', roundedCorners)
        .attr('ry', roundedCorners)
        .attr('fill',  backgroundFill)
        .attr('height', progressBarHeight)
        .attr('width', progressBarWidth)
        .attr('x', 0);

    var progress = svg.append('rect')
        .attr('class', 'progress-rect')
        .attr('fill', progressFill)
        .attr('height', progressBarHeight)
        .attr('width', 0)
        .attr('rx', roundedCorners)
        .attr('ry', roundedCorners)
        .attr('x', 0);

    progress.transition()
        .duration(1000)
        .attr('width',progressWidthValue);


[![enter image description here][1]][1] 


  [1]: https://i.stack.imgur.com/c4Sm3.png

Answer 1

您可以使用x和y这样的值将文字附加到svg：

svg.append('rect')
 .attr('class', 'bg-rect')
 .attr('rx', 5)
 .attr('ry', 5)
 .attr('fill',  'blue')
 .attr('height', 10)
 .attr('width', rectWidth)
 .attr('x', xRect)
 .attr('y', 20);

svg.append('text')
 .attr('color', 'red')
 .attr('x', 5)
 .attr('y', 30)
 .text('A')

svg.append('text')
 .attr('color', 'red')
 .attr('x', rectWidth + xRect)
 .attr('y', 30)
 .text('B')

请参阅http://jsfiddle.net/k76yx4am/

带有短信的进度条

1 个答案: