在正方形投影图d3js上绘制文本

时间:2014-12-11 05:52:55

标签: javascript d3.js azimuth

我一直在使用这个示例:http://mbostock.github.io/d3/talk/20111018/azimuthal.html我让它显示并与我自己的数据很好地协作。我看到他在示例中为每个国家/地区提供了一个标题

feature.append("svg:title")
  .text(function(d) { return d.properties.name; });

哪个很好用。我想实际上放文本而不是标题。所以我希望它作为标签出现在全国之上。

我试过这个

feature.append("svg:text")
    .text(function(d) { return d.p.n; })
    .style("color", "#00FF33");

许多其他组合似乎没有出现。有趣的是,我可以使用Chrome检查器,我会在路径元素中正确看到<text style="color: rgb(0, 255, 51);">Dominica</text>,但我看不到它出现在地图上。因此,显然它在技术上工作,因为它用正确的文字绘制它,但我看不到任何东西出现。

如果我只是做

,我也可以轻松地呈现文本
svg.selectAll("text")
    .data(collection.features)
    .enter()
    .append("svg:text")
    .text(function(d){
        return d.p.n;
    })
    .attr("x", function(d){
        return path.centroid(d)[0];
    })
    .attr("y", function(d){
        return  path.centroid(d)[1];
    })
    .attr("text-anchor","middle")
    .attr('font-size','6pt');

但这只是将它们绘制到地图上而不考虑现有国家,因此它们不会继续前进。

有什么想法吗?

由于

0 个答案:

没有答案