Question

希望这是适合这个的地方。这是我第一次在d3工作，我在世界的墨卡托投影地图上跟踪纬度（.bars）的一些路径。

虽然我离这个地图不太近（试图随着时间的推移动画变化，然后将工具提示包含在.bars中）：我仍然坚持使用缩放功能。我在缩放时更改了投影的比例，但它对我的矩形形状（.bars）没有影响。有人可以看看，让我知道发生了什么？为什么矩形不能缩放？我在缩放功能中没有正确访问它们吗？

＆＃13;

var width = 960,
    height = 550,
    scale0 = (width - 1) / 2 / Math.PI;

var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height)
    // .append("g");

var g = svg.append("g");

var bars = svg.append("rect");

var zoom = d3.behavior.zoom()
    .translate([width / 2, height / 2])
    .scale(scale0)
    .scaleExtent([scale0, 8 * scale0])
    .on("zoom", zoomed);

var color = d3.scale.quantize() // Takes data value inputs and will return colors
    .range(['rgb(215,48,39)','rgb(244,109,67)','rgb(253,174,97)','rgb(254,224,144)','rgb(255,255,191)','rgb(224,243,248)','rgb(171,217,233)','rgb(116,173,209)','rgb(69,117,180)']);

var projection = d3.geo.mercator()
    .scale((width + 1) / 2 / Math.PI)
    .translate([width / 2, height / 2])
    .precision(.1);

var path = d3.geo.path()
    .projection(projection);

svg
    .call(zoom)
    .call(zoom.event);

d3.json("world-110m.json", function(error, world) {
  if (error) throw error;

  g.insert("path", ".graticule")
    .datum(topojson.feature(world, world.objects.land))
    .attr("class", "land")
    .attr("d", path);

  g.insert("path", ".graticule")
    .datum(topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; }))
    .attr("class", "boundary")
    .attr("d", path);

  d3.csv("data/apr_dove.csv", function(data) {

    // Returns value based on min/max of data set to Colorbrewer colors
    color.domain([
      d3.max(data, function(d) { return d.average_revisit; }),
      d3.min(data, function(d) { return d.average_revisit; })
    ]);

    // Defining the rectangle's attributes by monthly data of satellites  (latitude and average revisit_rate)
    g.selectAll("rect")
      .data(data)
      .enter()
      .append("rect")
      .attr("width", width)
      .attr("class", "bars")
      .attr("height", function(d) {
        // console.log(projection.translate([0, 0.5])[1])
        return projection([0, d.latitude - 0.5])[1] - projection([0, d.latitude])[1];
      })
      .attr("opacity", .6)
      .style("fill", function(d) {
        //Get data value
        var value = d.average_revisit;

        if (value) {
                //If value exists…
                return color(value);
        } else {
                //If value is undefined…
                return "#ccc";
        }
       })
       //Define position of each rectangle by it's latitude from the data
      .attr("transform", function(d) {
        return "translate(" + projection([-180, d.latitude]) + ")"
      })
      .attr("d", path);
  });
});

function zoomed() {
  projection
      .translate(zoom.translate())
      .scale(zoom.scale());

  svg.selectAll("*")
      .attr("d", path);
}

d3.select(self.frameElement).style("height", height + "px");

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>

＆＃13;

<script src="https://gist.github.com/sadbumblebee/64581d15b89b361a17a85e8f37172673.js"></script>


<script src="https://gist.github.com/sadbumblebee/359fc826e4e55c8c3dcb3d279783e910.js"></script>

Answer 1

获得适当宽度的一个想法是根据你的陆地路径的大小来确定它：

(>>=)

完整代码here。

D3缩放和平移不适用于整个地图，只是投影

1 个答案: