javascript - 缩放 D3 Hexbin map 示例以适合 div

Question

我正在尝试使用 https://bl.ocks.org/mbostock/4330486 中找到的 D3 Hexbin 示例。并缩放 map 以适合父元素的宽度。我已按照答案 Center a map in d3 given a geoJSON object 中找到的代码进行操作，但是 map 全乱了(参见下面的代码片段)。此更改的目标是允许 map 位于响应式网页上。

var svg = d3.select("svg"),
    width = +svg.attr("width"),
    height = +svg.attr("height");

var parseDate = d3.timeParse("%x");

var color = d3.scaleTime()
    .domain([new Date(1962, 0, 1), new Date(2006, 0, 1)])
    .range(["black", "steelblue"])
    .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
    .extent([[0, 0], [width, height]])
    .radius(10);

var radius = d3.scaleSqrt()
    .domain([0, 12])
    .range([0, 10]);

// Per https://github.com/topojson/us-atlas
var projection = d3.geoAlbersUsa()
    .scale(1)
    .translate([0, 0]);

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

d3.queue()
    .defer(d3.json, "https://d3js.org/us-10m.v1.json")
    .await(ready);

function ready(error, us, walmarts) {
  if (error) throw error;

	var country = topojson.feature(us, us.objects.nation);
  
  var b = path.bounds(country),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
	projection
    .scale(s)
    .translate(t);
    
  svg.append("path")
      .datum(country)
      .attr("class", "nation")
      .attr("d", path);

  svg.append("path")
      .datum(topojson.mesh(us, us.objects.states, function(a, b) { return a !== b; }))
      .attr("class", "states")
      .attr("d", path);

}

.nation {
  fill: #ddd;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.hexagon {
  stroke: #fff;
}

<svg width="960" height="600"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>

Answer 1

您可以使用viewBox使您的d3js图表具有响应能力。 。要使 d3js 图表具有响应能力，您必须删除 width和height并使用viewBox .

更改很简单，只需使用 <svg></svg>而不是<svg width="960" height="600"></svg>然后只需添加 viewBox svg 上的属性如下所示:

var width = 960,
height = 600,
svg = d3.select("svg");

svg.attr("viewBox", "0 0 " + width + " " + height);

请检查正在运行的示例片段:

var width = 960,
  height = 600,
  svg = d3.select("svg");

svg.attr("viewBox", "0 0 " + width + " " + height);

var parseDate = d3.timeParse("%x");

var color = d3.scaleTime()
  .domain([new Date(1962, 0, 1), new Date(2006, 0, 1)])
  .range(["black", "steelblue"])
  .interpolate(d3.interpolateLab);

var hexbin = d3.hexbin()
  .extent([
    [0, 0],
    [width, height]
  ])
  .radius(10);

var radius = d3.scaleSqrt()
  .domain([0, 12])
  .range([0, 10]);

// Per https://github.com/topojson/us-atlas
var projection = d3.geoAlbersUsa()
  .scale(1280)
  .translate([480, 300]);

var path = d3.geoPath();

d3.queue()
  .defer(d3.json, "https://d3js.org/us-10m.v1.json")
  .await(ready);

function ready(error, us, walmarts) {
  if (error) throw error;

  var country = topojson.feature(us, us.objects.nation);

  var b = path.bounds(country),
    s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
    t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
  projection
    .scale(s)
    .translate(t);

  svg.append("path")
    .datum(country)
    .attr("class", "nation")
    .attr("d", path);

  svg.append("path")
    .datum(topojson.mesh(us, us.objects.states, function(a, b) {
      return a !== b;
    }))
    .attr("class", "states")
    .attr("d", path);

}

.nation {
  fill: #ddd;
}

.states {
  fill: none;
  stroke: #fff;
  stroke-linejoin: round;
}

.hexagon {
  stroke: #fff;
}

<div style="height: 100px; width: 100px;">
  <svg></svg>
</div>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>