Javascript Can'；无法使用path.centroid（）找到路径对象的中心

我想在d3地图中的每个社区中添加一个社区名称

我在这段代码中使用了centroid（）函数

var mapLabel = svg.selectAll("text")
    .data(json)
    .enter()
    .append("text")
    .text(function (d) {
        return d.properties.nhood;
    })
    .attr('transform', function (d) {
        return 'translate(' + path.centroid(d) + ')';
    })
    .attr('font-size', '6pt');

它把每个社区的名字放在远离中心的地方

我也试过使用代码

function addText(p)
{
    var t = document.createElementNS("http://www.w3.org/2000/svg", "text");
    var b = p.getBBox();
    t.textContent = "a";
    t.setAttribute("transform", "translate(" + (b.x + b.width/2) + " " + (b.y + b.height/2) + ")");
    t.setAttribute("fill", "red");
    t.setAttribute("font-size", "14");
    p.parentNode.insertBefore(t, p.nextSibling);
}

var paths = document.querySelectorAll("path");
for (var p in paths)
{
    addText(paths[p])
}

代码用于将文本添加到每个SVG的中心，但我不知道如何让它为每个邻居添加自定义文本。相反，我得到了41次“a”

我也在试着和他在一起。我无法访问该函数，我遇到了

getBBox（）不是函数的错误

这是创建地图的代码部分

var projection = d3.geoIdentity()
    .reflectY(true)
    .fitSize([w, h], jsonClone)

var pathFlipped = d3.geoPath()
    .projection(projection);

const mapSelection = svg.selectAll("path")
    .data(json)

mapSelection
    .enter()
    .append("path")
    .attr("d", pathFlipped)
    .style("fill", "lightgrey")

var mapLabel = svg.selectAll("text")
    .data(json)
    .enter()
    .append("text")
    .text(function (d) {
        return d.properties.nhood;
    })
    .attr('transform', function (d) {
        return 'translate(' + path.centroid(d) + ')';
    })
    .attr('font-size', '6pt');

这是一个演示。
这是如何找到路径中心的。为此，我按照您的预期使用了路径.getBBox（）

。我已经使用

主基线=“middle”text anchor=“middle”

将文本居中，希望它能有所帮助

let bb=thePath.getBBox（）
设中心={}
中心x=bb.x+bb.width/2；
中心y=bb.y+bb.height/2；
setAttributeNS（null，“x”，center.x）；
setAttributeNS（null，“y”，center.y）
svg{边框：1px实心；宽度：90vh；字体大小：10px；}
路径{笔划：黑色；填充：无}

一些文本
这就是我如何找到路径中心的方法。为此，我按照您的预期使用了路径.getBBox（）

。我已经使用

主基线=“middle”text anchor=“middle”

将文本居中，希望它能有所帮助

let bb=thePath.getBBox（）
设中心={}
中心x=bb.x+bb.width/2；
中心y=bb.y+bb.height/2；
setAttributeNS（null，“x”，center.x）；
setAttributeNS（null，“y”，center.y）
svg{边框：1px实心；宽度：90vh；字体大小：10px；}
路径{笔划：黑色；填充：无}

一些文本
您需要对文本使用与路径相同的投影

.attr('transform', function(d) { return 'translate(' + pathFlipped.centroid(d) + ')'; })

您需要对文本使用与路径相同的投影

.attr('transform', function(d) { return 'translate(' + pathFlipped.centroid(d) + ')'; })

在选择dropbox时，您的数据集（csv、json）发生变化的可能性有多大？每个下拉列表对应csv中的不同列。也就是说，只有当下拉列表设置为“默认”时，我才会显示邻居名称。每次下拉列表更改，json都会更改，csv也会更改。csv保持静态。下拉列表告诉它根据csv中的不同列填充地图。那么为什么每次更改都加载静态内容？在选择下拉框期间，您的数据集（csv、json）发生变化的可能性有多大？每个下拉列表对应于csv中的不同列。也就是说，只有当下拉列表设置为“默认”时，我才会显示邻居名称。每次下拉列表更改，json都会更改，csv也会更改。csv保持静态。下拉列表告诉它根据csv中的不同列填充地图。那么为什么每次更改都加载静态内容呢？