Question

我正在使用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");
        }

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

现在在我的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");
}

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

感谢。

Answer 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，对于阅读代码的人来说，它会更清晰。

替换文本而不是附加在d3＆amp; jQuery的

1 个答案: