Ersetzen von Text statt anhängen in d3 & Jquery

Ich benutze eine Kombination von Javascript + jQuery & d3.js, um benutzerdefinierte Chart-Elemente im SAP UI5 Dashboard zu erstellen.Ersetzen von Text statt anhängen in d3 & Jquery

In meiner render Funktion in gauge.ds, ich habe unten Code:

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"); 
     }

Dies schafft eine Lehre, und es gibt ein Etikett neben dieser Lehre wie in der Abbildung dargestellt.

Jetzt in meiner redraw Funktion, möchte ich dieses Etikett durch einen neuen Text ersetzen. Ich habe den folgenden Code geschrieben, aber es funktioniert nicht, da es über das vorherige Etikett schreibt und beide sind nun aufeinander sichtbar.

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"); 
}

Welchen Code soll ich ändern, um den Text im Etikett zu ersetzen, statt darüber zu schreiben?

Danke.

Quelle

2017-09-21 Soham Shah

eine ID zu Ihrem Text in der render Funktion geben:

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

und wählen Sie nach Klasse in der redraw Funktion:

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

Wenn das das einzige <text> Element in der SVG-Auswahl ist, Sie könnten einfach tun ...

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

... ohne ID oder Klasse.

Eine dritte Lösung benennt eine Auswahl außerhalb beide Funktionen, die Sie in ihnen ändern können.

Schließlich gibt es zwei Hinweise:

Zuerst sagte man "Ich habe eine Kombination von jQuery & d3.js bin mit". Das ist fast immer eine schreckliche Idee. Tu das nicht.

Zweitens würde ich Ihnen raten, die Namen Ihrer Variablen und Objekte zu beachten. Sie beziehen sich auf eine SVG-Auswahl als body. Normalerweise würden wir erwarten, dass sich this.body auf die <body> bezieht. Also, ändern Sie es in this.svg, es ist klarer für jeden, der Ihren Code liest.

Quelle

2017-09-21 07:56:09

Arbeitete wie ein Charme! Vielen Dank für Anregungen und Feedback. Ich werde versuchen, sie in meinen Code zu integrieren. Schätze es wirklich. –

Ersetzen von Text statt anhängen in d3 & Jquery

Antwort

Verwandte Themen