替换文本而不是附加在d3& jQuery的

时间:2017-09-21 07:49:52

标签: javascript jquery d3.js sapui5

我正在使用Javascript + jQuery和amp; d3.js在SAP UI5仪表板中创建自定义图表元素。

在gau.ds中的render函数中,我有以下代码:

this.render = function()
    {
        this.body = d3.select("#" + this.placeholderName)
                            .append("svg:svg")
                            .attr("class", "gauge")
                            .attr("width", this.config.size + 10)
                            .attr("height", this.config.size + 10);

        this.body.append("svg:circle")
                    .attr("cx", this.config.cx)
                    .attr("cy", this.config.cy)
                    .attr("r", this.config.raduis)
                    .style("fill", "#ccc")
                    .style("stroke", "#000")
                    .style("stroke-width", "0.5px");

        this.body.append("svg:circle")
                    .attr("cx", this.config.cx)
                    .attr("cy", this.config.cy)
                    .attr("r", 0.9 * this.config.raduis)
                    .style("fill", "#fff")
                    .style("stroke", "#e0e0e0")
                    .style("stroke-width", "2px");

        if (undefined != this.config.label)
        {
            var fontSize = Math.round(this.config.size / 12);
            this.body.append("svg:text")
                        .attr("x", this.config.cx)
                        .attr("y", this.config.cy * 2 + fontSize / 2)
                        .attr("dy", fontSize / 2)
                        .attr("text-anchor", "middle")
                        .text(this.config.label)
                        .style("font-size", fontSize + "px")
                        .style("fill", "#333")
                        .style("stroke-width", "0px");
        }

这会创建一个标尺,并且该标尺旁边有一个标签,如图所示。

enter image description here

现在在我的redraw函数中,我想用新文本替换此标签。我已经编写了以下代码,但它不能正常工作,因为它在以前的标签上写入,并且两者现在彼此可见。

this.redraw = function(value)
{
var fontSize = Math.round(this.config.size / 12);
                this.body.append("svg:text")
                            .attr("x", this.config.cx)
                            .attr("y", this.config.cy * 2 + fontSize / 2)
                            .attr("dy", fontSize / 2)
                            .attr("text-anchor", "middle")
                            .text(value)
                            .style("font-size", fontSize + "px")
                            .style("fill", "#333")
                            .style("stroke-width", "0px");
}

我应该更改哪些代码来替换标签中的文字而不是用它来书写?

感谢。

1 个答案:

答案 0 :(得分:1)

render函数中为您的文字提供ID:

this.body.append("svg:text")
    .attr("id", "textLabel")
    //etc...

并在redraw函数中按类选择:

this.body.select("#textLabel")
    .text(value)

如果这是SVG选择中唯一的<text>元素,您可以简单地执行...

this.body.select("text")
    .text(value)

...没有任何ID或类。

第三个解决方案是命名选择外部这两个函数,您可以在其中更改。

最后,有两条建议:

首先,你说&#34;我正在使用jQuery和amp;的组合d3.js&#34; 。这几乎总是一个糟糕的主意。别这么做。

其次,我建议您记住变量和对象的名称。您将SVG选择称为body。通常,我们希望this.body引用<body>。因此,将其更改为this.svg,对于阅读代码的人来说,它会更清晰。