將文本添加到RECT不工作

Question

我想添加文本RECT但它似乎並沒有工作，這就是我想，

var width = 600, 
height = 600; 
var margin = {top: -5, right: -5, bottom: -5, left: -5}; 

var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 15]) 
    .on("zoom", zoomed); 

var svgContainer = d3.select("body").append("svg") 
            .attr("width", width) 
            .attr("height", height) 
            .style("background-color", "black") 
            .append("g") 
            .attr("transform", "translate(" + margin.left + "," + margin.right + ")") 
            .call(zoom); 

var zoomed = function() { 
    svgContainer.attr("transform", "translate("+ d3.event.translate + ")scale(" + d3.event.scale + ")"); 
}; 

var zoom = d3.behavior.zoom() 
.scaleExtent([1, 8]) 
.on("zoom", zoomed) 
.size([width, height]); 

svgContainer.call(zoom); 

var rectangle1 = svgContainer.append("rect") 
          .attr("x", 0) 
          .attr("y", 0) 
          .attr("width", 100) 
          .attr("height", 100) 
          .attr("fill", "red") 
          .append("text") 
          .text("Hahaha"); 

這裏是搗鼓它 - http://jsfiddle.net/nhe613kt/60/

Answer 1

矩形不能包含文本元素。相反變換的文字和矩形的位置的g元件，那麼兩個矩形和文本附加到它：

D3 Appending Text to a SVG Rectangle

svgContainer.append("text") 
    .attr("id", "rectangleText") 
    .attr("class", "visible") 
    .attr("x", 10) 
    .attr("y", 50) 
    .attr("dy", ".35em") 
.text("You're Welcome :)"); 

相反，它附加到矩形其追加到對象的矩形的追加到:)

小提琴：http://jsfiddle.net/nhe613kt/71/

而且，你的矩形的拖動有點靜態的，那並不正確地移動。您需要拆分縮放功能並分別創建拖動功能。然後附加拖動到矩形，並放大到SVG :)

希望可以幫助