將文本分配給不起作用的矩形

-2

我正在動態創建矩形，我將其中一個數據值作爲文本分配給矩形。在開發人員工具中，我可以看到值而不是矩形。將文本分配給不起作用的矩形

代碼：

var x = d3.scale.linear().domain([0, data.length]).range([0, 1200]); 

         console.log(filtereddata); 

         rectangle= svg.selectAll("rect").data(filtereddata).enter().append("g").append("rect"); 



         RectangleAttrb = rectangle 
         .attr("id", function (d,i) { return "rectid" + i ; }) 
         .attr("x", function (d,i) { 
                return x(i); 
                }) 
         .attr("y", function (d,i) { return 40; }) 
         .attr("width",function(d,i) { 
                 if(d.value <100) 
                 { 
                  return 50; 
                 } 
                 else 
                 { 
                  return d.value/2 ; 
                 } 
                }) 
         .attr("height",function(d) { return 40; }) 
         .style("stroke", function (d) { return "white";}) 
         .style("fill", function(d) { return "#01DF01"; }) 
         .on("click",function(d,i) { console.log(d);}); 

         console.log(RectangleAttrb); 

         rectangle.append("text") 
         .attr("x", function(d,i) { return x(i) + 5; }) 
         .attr("y", 35) 
         .attr("dy", ".35em") 
         .attr("text-anchor", "middle") 
         .attr("fill", "black") 
         .text(function(d) { return d.value; });

我的數據是：

[{status:1;value:300}, 
{status:2;value:200}, 
{status:3;value:50}]

來源

2015-05-29 krishna_v

是，SVG不支持[rect]上的文本屬性，並且你不能在rect中有子元素（https://developer.mozilla.org/en-US/docs/Web/SVG/Element/rect），你需要創建ag包含rect和一個svg：文本元素。 –

我做了一個並替換了代碼rectangle.append（「g」）。append（「svg：text」）而不是rectangle.append（「text」），但仍然不起作用。 –

不，您需要將g元素附加到svg，然後將rect和文本分別附加到g。正如我所說，g必須包含它們兩者。有很多這個例子，如果你谷歌... –

需要矩形添加標籤，然後追加文字相同。所以基本上「G」標記將是正確，而且文字:)）

如這裏的評論中提到兩者的母公司是一個很好的問題是指：

SVG: text inside rect

來源

2015-05-29 10:47:16 thatOneGuy

將文本分配給不起作用的矩形

回答

相關問題