d3.js 如何使用getbbox生成多个rect

vx6bjr1n 于 2022-11-12 发布在其他

关注(0)|答案(1)|浏览(203)

i只能为我的文本生成一个矩形。我不知道如何将getBBox应用于多个文本元素，使它们都有自己的背景。有人知道我如何才能完成这一点吗？

function jobsCreation() {
        let enteringText = dataJobs
            .enter()
            .append("text")
            .attr("x", function (d) { return d.posX })
            .attr("y", function (d) { return d.posY })
            .attr("id", "jobText")
            .text(function (d) { return d.name });

        let texts = d3.selectAll("#jobText");

        let bbox = enteringText.node().getBBox();
        console.log(bbox);

        let rect = svg.append("rect")
            .attr("x", bbox.x)
            .attr("y", bbox.y)
            .attr("width", bbox.width)
            .attr("height", bbox.height)
            .attr("id", "nodeBox")
            .style("fill", "white")
            .style("stroke", "black")
            .style("stroke-width", "1.5px");

        enteringText.raise();

    }

d3.js

来源：https://stackoverflow.com/questions/73027257/how-to-do-use-getbbox-to-generate-multiple-rects

1条答案

按热度按时间

y1aodyip1#

svg.append()将创建单个元素，而selection.node()将仅返回单个节点。
虽然selection.nodes()会返回一个数组，其中包含一个选择中的所有节点，但我们仍然需要为每个节点添加一个矩形。为此，我们可以使用selection.nodes()返回的数组作为回车循环的数据数组：

let enteringRects = svg.selectAll("rect")
  .data(enteringText.nodes())
  .enter()
  .append("rect")
  .attr("x", function(node) { return node.getBBox().x })
  .attr("y", function(node) { return node.getBBox().y })
  .attr("width", function(node) { return node.getBBox().width })
  .attr("height", function(node) { return node.getBBox().height })
  .style("fill", "white")
  .style("stroke", "black")
  .style("stroke-width", "1.5px")
  .lower();

现在，我们为每个文本元素创建一个矩形，因为这个选择中的绑定数据是一个DOM元素，我们可以很容易地访问getBBox（），因为它现在是数据本身的一个属性。
第一个

赞(0）回复(0）举报 2022-11-12

我来回答

d3.js 如何使用getbbox生成多个rect

1条答案

相关问题

热门标签

最新问答