Question

我试图在我的svg路径周围插入一个标签，但我不确定如何使用我正在使用的代码。有人可以帮忙吗？

var feature;

        var projection = d3.geo.azimuthal()
            .scale(380)
            .origin([-71.03,42.37])
            .mode("orthographic")
            .translate([380, 400]);

        var circle = d3.geo.greatCircle()
            .origin(projection.origin());

        // TODO fix d3.geo.azimuthal to be consistent with scale
        var scale = {
          orthographic: 380,
          stereographic: 380,
          gnomonic: 380,
          equidistant: 380 / Math.PI * 2,
          equalarea: 380 / Math.SQRT2
        };

        var path = d3.geo.path()
            .projection(projection);


        var svg = d3.select("#globe").append("svg:svg")
            .attr("width", 800)
            .attr("height", 800)
            .on( "dblclick", dblclick)
            .on("mousedown", mousedown);

        var g = svg.append("g");

        d3.json("simplified.geojson", function(collection) {
            //how can I put the <g> around the path or feature?
            feature = svg.selectAll("path")

              .data(collection.features)
              .enter().append("svg:path")
              .attr("d", clip)
              .attr("id", function(d) { return d.properties.ISO3; })
              .on("mouseover", pathOver)
              .on("mouseout", pathOut)
              .on("click", click);

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

          feature.each(function(){

             for (var i=0; i<unrepresented.length; i++){
                if ($(this).attr('id') == unrepresented[i]) {
                    d3.select(this).style("fill", "#ededed");
                    $(this).css('cursor', 'auto');
                } 

             }
             if (($(this).attr('id') == 'GRL') || ($(this).attr('id') == 'ATA')) { //Greenland and Antarctica are shapes, but not countries
                d3.select(this).style("fill", "#ededed");
             }
          });


        });

Answer 1

我是这样做的：

var g = svg.append("g");

        d3.json("simplified.geojson", function(collection) {

            g.append("g")
              .attr("id", "countries")
            .selectAll("path")
              .data(collection.features)
            .enter().append("svg:path")
              .attr("d", clip)
              .attr("id", function(d) { return d.properties.ISO3; })
              .on("mouseover", pathOver)
              .on("mouseout", pathOut)
              .on( "dblclick", dblclick)
              .on("click", click);

             feature = svg.selectAll("path");

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


        });

在d3中将路径附加到g

1 个答案: