Question

我已经能够成功运行以下代码https://bl.ocks.org/fdlk/076469462d00ba39960f854df9acda56。现在，我试图找到一种方法来在切换屏幕（笔记本电脑到更大的显示器）或浏览器窗口（完整或较小）时自动缩放d3图。

有人可以指导我在哪里进行调整以使所提及的代码具有响应性吗？（原始代码应该没有响应）

我已经尝试了多种方法，例如使用viewBox，Windows事件等，但均未成功（请参见下面的 OPTIONS ）。由于我是新手，因此我确定某个地方缺少小东西。

选项1：

原始代码的一部分：

A部分

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

Part-B

var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

修改原始代码的A部分：

<svg id="chart" width="960" height="500"
viewBox="0 0 960 500"
preserveAspectRatio="xMidYMid meet">
</svg>

样式（CSS）中未添加任何内容。

选项2：

原始代码的一部分：

var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

已修改原始代码：

d3.select("div#chartId")
.append("div")
.classed("svg-container", true) //container class to make it responsive
.append("svg")
//responsive SVG needs these 2 attributes and no width and height attr
.attr("preserveAspectRatio", "xMinYMin meet")
.attr("viewBox", "0 0 600 400")
//class to make it responsive
.classed("svg-content-responsive", true);

问题是原始代码中的“ div＃chartId”定义在哪里？它只是d3.select（“ svg”）。另外，d3.select下面的代码应使用边距和直径参数。

还在样式（CSS）中添加了以下内容

.svg-container {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%; /* aspect ratio */
vertical-align: top;
overflow: hidden;
}
.svg-content-responsive {
display: inline-block;
position: absolute;
top: 10px;
left: 0;
}

选项3：

原始代码的一部分：

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>  
var svg = d3.select("svg"),
margin = 20,
diameter = +svg.attr("width"),
g = svg.append("g").attr("transform", "translate(" + diameter / 2 + "," + diameter / 2 + ")");

var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

已修改原始代码：

<svg width="960" height="960"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<div id="chart"></div>
<script>

var chartDiv = document.getElementById("chart");
var svg = d3.select(chartDiv).append("svg");

function redraw(){

// Extract the width and height that was computed by CSS.
    var width = chartDiv.clientWidth;
    var height = chartDiv.clientHeight;

    // Use the extracted size to set the size of an SVG element.
    svg
      .attr("width", width)
      .attr("height", height);

    // Draw an X to show that the size is correct.
    var lines = svg.selectAll("line").data([
      {x1: 0, y1: 0, x2: width, y2: height},
      {x1: 0, y1: height, x2: width, y2: 0}
    ]);
    lines
      .enter().append("line")
        .style("stroke-width", 50)
        .style("stroke-opacity", 0.4)
        .style("stroke", "black")
      .merge(lines)
        .attr("x1", function (d) { return d.x1; })
        .attr("y1", function (d) { return d.y1; })
        .attr("x2", function (d) { return d.x2; })
        .attr("y2", function (d) { return d.y2; })
     ;
  }

  // Draw for the first time to initialize.
  redraw();

  // Redraw based on the new size whenever the browser window is resized.
  window.addEventListener("resize", redraw);

var color = d3.scaleLinear()
.domain([-1, 5])
.range(["hsl(152,80%,80%)", "hsl(228,30%,40%)"])
.interpolate(d3.interpolateHcl);

如何调整Zoomable Circle Pack html代码以做出响应？

0 个答案: