Question

我有一个地图容器，显示世界地图，应该是响应但是当我运行它并调整页面大小时它不起作用，我无法找到问题。调整屏幕大小时的预期效果。这是我的代码

＆＃13;

    var tooltipMap = d3.select("body")
        .append("div")  
        .attr("class", "map-tooltip shadow")            
        .style("opacity", 0);                

      var projection = d3.geo.mercator()
        .center([0, 62 ])
        .scale(150)
        .rotate([0, 0]);

      var svg = d3.select("#map-container").append("svg")
        .attr("width", width)
        .attr("height", height)
        .attr('viewBox', "0 0 "+(width)+" "+(height))
        .attr('preserveAspectRatio', 'xMinYMid')
        .attr("class","chart");
      
      var path = d3.geo.path()
        .projection(projection);

      var defs = svg.append('svg:defs');

      defs.append("svg:pattern")
        .attr("id", "bgImg")
        .attr("width", 6)
        .attr("height", 6)
        .attr("patternUnits", "userSpaceOnUse")
        .append("svg:image")
        .attr("xlink:href", '../assets/img/map-tile.png')
        .attr("width", 6)
        .attr("height", 6)
        .attr("x", 0)
        .attr("y", 0);
      
      var g = svg.append("g")
        .attr("width", width+160)
        .attr("height", height);

      // load and display the World
      d3.json("om.json", function (error, topology) {
        g.selectAll("path")
          .data(topojson.object(topology, topology.objects.countries).geometries)
          .enter()
          .append("path")
          .attr("fill", "url(#bgImg)")
          .attr("d", path);
      });

＆＃13;

<script src="js/d3.v3.min.js"></script>

＆＃13;

<div id="map-container"></div>

＆＃13;

基本上是出现的内容，

.attr（＆＃34;类＆＃34;＆＃34;图表＆＃34）;

不起作用，想知道为什么？

解决方案 -

CSS - 奇怪的是，但这是我的CSS没有完美放置的问题。！ Facepalm !!!

.chart {width：100％;高度：100％; }

SVG元素没有响应 - 屏幕调整大小时

0 个答案: