невозможно изменить размер карты d3 - PullRequest
Новая
       5

невозможно изменить размер карты d3

0 голосов
/ 10 сентября 2018

У меня есть эта карта в 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);

Любая помощь приветствуется!

...