Question

这很特别。我有一些 pathes （想象它们是地图上的河流），并希望它们提供名称。

此代码正常运行。它正在创建路径，然后在该行上写下文本：

function draw_rivertext(){
    var featureCollection = topojson.feature(currentMap, currentMap.objects.text);
    svgmap.append("g")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path)
          .attr("class", "helperline")
          .attr("id", function(d) {return "path"+d.properties.id});
    svgmap.append("text")
          .selectAll("text")
          .data(featureCollection.features)
          .enter()
          .append("textPath")
          .attr("class", "helperline-text")
          .attr("xlink:href", function(d) {return "#path"+d.properties.id})
          .text(function(d) {return d.properties.name});
}

但问题是该文字只有一个 font-size 。所以，让我说我有一条长河和一条短河。所以短河应该是超小而不是完全相同的大小。

所以我的想法是设置文字：

.attr("font-size", "10")

这里的值10需要是路径id的当前大小。我真的不知道该怎么做。

这里有一些关于这个主题的链接：

我还发现一些在使用jQuery创建后重新采样font-size等。那肯定是一个解决方案。获取路径大小;重新采样该值的文本属性。但我认为这不是一个合适的解决方案。

另一个想法也可以是将topojson中的font-size指定为自己的参数。但是，哦，这将是尝试和错误，因为在QGIS中没有真正的测量。

Answer 1

感谢 Lars Kotthoff 这是一个有效的解决方案：

svgmap.append("g")
          .selectAll("path")
          .data(featureCollection.features)
          .enter().append("path")
          .attr("d", path)
          .attr("class", "helperline")
          .attr("id", function(d) {return "path"+d.properties.id})
          .each(function() { this.__data__.totalLength = this.getTotalLength(); });
    svgmap.append("text")
          .selectAll("text")
          .data(featureCollection.features)
          .enter()
          .append("textPath")
          .attr("class", "helperline-text")
          .attr("xlink:href", function(d) {return "#path"+d.properties.id})
          .attr("font-size", function(d) { return (d.totalLength/8); })
          .text(function(d) {return d.properties.name});

除以8的效果非常好。现在唯一的问题是某些文字不适合，但90％看起来很棒，而且整理后的尺寸非常适合。

对于我的情况，我决定自己计算每个元素的大小。所以这里更容易，但可能不是完美解决方案。

绘制具有大小和长度的SVG文本根据特定路径调整

1 个答案: