Question

我在d3中拥有一张由图表和地图组成的地图：

我定义了一些全局变量：

var chartWidth = window.innerWidth * 0.425,
chartHeight = 473,
leftPadding = 35,
rightPadding = 2,
topBottomPadding = 5,
innerWidth = chartWidth - leftPadding - rightPadding,
innerHeight = chartHeight - topBottomPadding * 2,
translate = "translate(" + leftPadding + "," + topBottomPadding + ")";

这是地图：

//set up the map
function setMap(){
    var width = window.innerWidth * 0.55, //dimensions
        height = 580; //dimensions

//create new svg container for the map
var map = d3.select("body")
    .append("svg")
    .attr("class", "map")
    .attr("width", width)
    .attr("height", height);

和链接的图表：

 function setChart(csvData, colorScale, attribute){

var expressed = attribute
    //create a second svg element to hold the bar chart
    var chart = d3.select("body")
        .append("svg")
        .attr("width", chartWidth)
        .attr("height", chartHeight)
        //assign class
        .attr("class", "chart");

    //create a rectangle for chart background fill
    var chartBackground = chart.append("rect")
        .attr("class", "chartBackground")
        .attr("width", innerWidth)
        .attr("height", innerHeight)
        .attr("transform", translate);

}

我正在尝试使地图（地图本身和关联的图表都附加到“地图”画布上）具有响应性，因此在调整窗口大小时会调整大小。我很幸运地在setMap函数中插入了以下代码，希望在重新调整大小时对“地图”进行重新分类：

   d3.select("map")
   .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 " + width + " " + height)
   //class to make it responsive
   .classed("svg-content-responsive", true);

任何帮助表示赞赏！

无法调整D3地图的大小

0 个答案: