Question

似乎无法弄清楚如何制作我制作的D3地图-只是想在页面上移动地图，而不是调整大小等。

这里有代码-

    var width = 700;
    var height = 880;


    //create SVG

    var mapContainer = d3.select("body")
        .append("mapContainer")
        .attr( "width", 900 )
        .attr ( "height", 900 )



    var Map = mapContainer.append(svg)
    var svg = d3.select("body")
        .append("svg")
        .attr( "width", width )
        .attr ( "height", height )
        var g = svg.append ( "g" )


    //GeoPath
    var geoPath = d3.geoPath()
        .projection( albersProjection );

    g.selectAll( "path" )
        .data( Chicago.geometries )
        .enter()
        .append( "path" )
        .attr( "stroke", "white" )
        .attr( "border-radius", '50%' )
        .attr( "stroke-width", ".5" )
        .attr( "fill", "#black" )
        .attr( "opacity", ".2" )
        .attr("class","communities")
        .attr( "d", geoPath )




    //lets load crimes
    // svg repositioning

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

    rodents.selectAll( "path" )
        .data( homicides.features )
        .enter()
        .append( "path" )
        .attr( "pointRadius", "10px" )
        .attr( "fill", initialDate)
        .attr( "stroke", "#ccc" )
        .attr("opacity", 1)
        .attr( "d", geoPath.pointRadius(initialDateMatchRadius) )
        .attr("class","incident")
        .on("mouseover", function(d){
            d3.select("h2").text(d.properties.Block);
            d3.select(this).attr("class","hover");
        })
        .on("mouseout", function(d){
            d3.select("h2").text("");
            d3.select(this).attr("class","incident");
        });

当我检查实时页面时，“ g”元素似乎是保存我的地图的容器。当我尝试在现有代码下添加一行时：

var Map = mapContainer.append(svg)
var svg = d3.select("body")
    .append("svg")
    .attr( "width", width )
    .attr ( "height", height )
    // Trying to move g element
    var g = svg.append ( "g" )
       .attr('cx', 40)

什么都没发生。以相同的方式设置position属性也不起作用。预先感谢！

无法在D3中移动svg元素

0 个答案: