向矩形添加文本不起作用

Question

我正在尝试向矩形添加文本，但它似乎不起作用，这就是我正在尝试的，

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

这是 fiddle - 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 :)");

不是将它附加到矩形，而是将它附加到矩形附加到的对象:)

Fiddle : http://jsfiddle.net/nhe613kt/71/

此外，您对矩形的拖动有点静止，移动不正确。您需要拆分缩放功能并单独创建拖动功能。然后将拖动的附加到矩形，并将缩放到 SVG :)

希望对你有帮助

向矩形添加文本不起作用

Adding text to rect not working

html

d3.js