d3＆Jqueryでの追加ではなくテキストの置換

私は、Javascript + jQuery & d3.jsの組み合わせを使用して、SAP UI5ダッシュボードでカスタムチャート要素を作成しています。 gauge.dsの私render機能でd3＆Jqueryでの追加ではなくテキストの置換

、私はコードの下にあります

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

ラベルのテキストを上書きする代わりに、そのテキストを置き換えるにはどのようなコードを変更する必要がありますか？

ありがとうございました。 redraw機能にクラスによって

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

をと選択：：

出典

2017-09-21 Soham Shah

はrender機能であなたのテキストにIDを付け

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

をそれはSVGの選択でのみ<text>要素である場合、あなたは単に行うことができます...

... IDやクラスなし。

第3の解決方法は、外側のの両方の機能を指定することです。これらの機能は内部で変更できます。

は最後に、2つのアドバイス：

まず、あなたはが "私はjQueryの& d3.jsの組み合わせを使用しています" と述べました。それはほとんどいつもひどい考えです。それをしないでください。

第2に、変数とオブジェクトの名前を気にすることをお勧めします。あなたはbodyというSVG選択を参照しています。通常、this.bodyは<body>を意味します。したがって、それをthis.svgに変更してください。あなたのコードを読んでいる人は誰でも分かります。

出典

2017-09-21 07:56:09

チャームのように働いた！提案とフィードバックに感謝します。私はそれらを私のコードに組み込もうとします。心から感謝する。 –

d3＆Jqueryでの追加ではなくテキストの置換

答えて

関連する問題