使用具有节点和文本的Map的缩放功能时遇到问题

时间:2017-05-12 08:02:52

标签: javascript d3.js

我正在尝试使用缩放功能来处理具有节点和状态文本的地图。我使用下面的链接进行缩放:

https://bl.ocks.org/mbostock/2206340

enter image description here

当我从链接应用逻辑时,地图正在使用节点和链接进行缩放,但状态的文本不会缩放,几秒钟后节点和链接也会停止缩放,只有地图放大和缩小。以下是我的示例代码,它基于D3 v4。

    // projection definition
var projection = d3.geoAlbers()
    .scale(width)
    .translate([width / 2, height / 2]);



// path generator definition for major cities, including point radius
var path = d3.geoPath()
    .projection(projection)
    .pointRadius(2);

var zoom = d3.behavior.zoom()
    .translate(projection.translate())
    .scale(projection.scale())
    .scaleExtent([height, 8 * height])
    .on("zoom", zoomed);

var svg = d3.select(this.domNode).append("svg")
      .attr("width",width + margin.left + margin.right)
      .attr("height",height + margin.top + margin.bottom)
      /*.call(d3.zoom().on("zoom", function () {
   svg.attr("transform", d3.event.transform);
}))*/

      //.attr("transform", "translate("+margin.left +"," +margin.top+")")
      .on("click", function(d) {
        if (event.target.classList.contains('nodes')) {
            me.clearSelections();
            me.endSelections();
            return true;
        } else {
            return true;
        }
     })
;


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

.....................
..................

.................
....................

function zoomed() {
  projection.translate(d3.event.translate).scale(d3.event.scale);
  g.selectAll("path").attr("d", path);
  g.selectAll("circle").attr("d", node); //I tried this and below for testing but it didn't work
  g.selectAll("line").attr("d", link);


}

0 个答案:

没有答案