我正在使用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");
}
我应该更改哪些代码来替换标签中的文字而不是用它来书写?
感谢。
答案 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
,对于阅读代码的人来说,它会更清晰。