无法使用 path.centroid() 找到路径对象的中心

Question

我想为我的 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 的中心，但我不知道如何让它为每个社区添加自定义文本。 相反，我得到了四十一次“a”。

我也在尝试使用getBBox() 。 我无法访问该函数，我遇到了getBBox() is not a function错误。

这是创建地图的代码部分。

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

这是完整地图的演示。

Answer 1

这就是我找到路径中心的方式。 为此，我按照您的意图使用thePath.getBBox() 。 我使用dominant-baseline="middle" text-anchor="middle"将文本居中，希望对您有所帮助。

 let bb = thePath.getBBox() let center = {} center.x = bb.x + bb.width/2; center.y = bb.y + bb.height/2; theText.setAttributeNS(null,"x", center.x); theText.setAttributeNS(null,"y", center.y);

 svg{border:1px solid; width:90vh;font-size:10px;} path{stroke:black; fill:none}

 <svg viewBox="400 200 80 80"> <path id="thePath" d="M460.2747483221477,215.0904841802493L460.97974592521575,219.66323106423778L461.6808485139022,224.23208293384465L462.3585810162992,228.75419463087246L463.00515340364336,233.3464165867689L463.7257310642378,238.15286433365287L470.05902444870566,237.07005033557044L470.7990771812081,242.03229865771806L471.52744487056566,246.87380153403637L472.24802253116013,251.71530441035475L472.9919702780441,256.5451222435282L473.7437080536913,261.7994966442953L467.41430968360504,262.87452061361455L462.5377516778524,263.70415867689354L462.18330536912754,263.7314237775647L462.0976150527325,263.73531879194627L461.99244966442956,263.74700383509105L458.4518815915628,264.00017976989454L456.4264741131352,264.35852109300095L456.3641538830297,264.15208533077663L456.18108820709494,263.51330297219556L453.50131831255993,263.88722435282835L449.9490651965484,264.52600671140937L449.6024089165868,264.7636025886864L445.96446548418027,265.340064717162L445.71128954937683,265.78799137104505L445.2984180249281,265.4763902205177L442.0460810162991,266.0139022051773L441.76174496644296,266.4774089165868L441.3293983700863,266.13075263662506L438.14717162032605,266.6682646212848L437.8316754554171,267.15903643336526L437.4149089165868,266.8474352828379L434.16257190795784,267.4161073825503L433.8899209012464,267.86403403643334L433.51210450623205,267.5407478427612L430.4311481303931,268.0237296260786L430.0260666347076,268.47555129434323L429.61319511025886,268.1873202301054L426.0492569511026,268.8027325023969L425.7805009587728,269.2039189837008L425.4104745925216,268.8650527325024L425.0599232981783,268.91958293384465L424.8495925215724,269.3480345158197L424.42893096836053,269.04422339405556L422.15034755512943,269.231184084372L421.8815915627996,269.60900047938634L421.49988015340364,269.2662392138063L420.6040268456376,269.30908437200384L416.6934324065197,269.53110019175455L416.3623561840844,269.9517617449664L416.01959491850437,269.6362655800575L412.5335570469799,269.80764621284754L412.0388902205177,270.25167785234896L411.5052732502397,260.22201581975065L411.32610258868647,256.90735858101624L410.9833413231064,250.50784995206135L410.8080656759348,247.27498801534034L410.51204458293387,242.38674496644296L410.42245925215724,240.87547938638534L410.2510786193672,237.72441275167785L410.005692713327,233.13219079578136L409.75641179290506,228.48154362416102L409.67072147651004,226.3509707574305L411.38452780441037,226.32370565675933L417.3361097794823,224.71506471716202L423.64992809204216,223.00515340364336L429.82352588686484,221.3380872483221L435.5414069990412,219.79176653883025L442.2447267497603,217.98058485139023L448.2703139980825,216.34857382550337L448.4962248322148,217.12368168744L454.97752876318316,216.00581255992324Z"></path> <text id="theText" dominant-baseline="middle" text-anchor="middle" >Some text</text> </svg>

Answer 2

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

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