Bootstrap получить ширину столбца div в пикселях

Question

Я создаю страницу с бутстрапом. Я отлично работаю, но один из элементов - масштабируемая карта США (с использованием d3). Функция масштабирования, которую я использую, требует ширины и высоты div в пикселях, чтобы рассчитать, как перевести и масштабировать карту. Я пробовал использовать проценты, но я ничего не могу сделать. Есть ли способ динамически получить высоту и ширину div. Я искал все, но поисковые термины слишком универсальны (или я недостаточно умен, чтобы правильно их сформулировать).

В качестве альтернативы, как еще я могу получить необходимые значения.

Вот моя реализация с использованием жесткой кодированной ширины и высоты (которая не будет работать при изменении размера страницы).

//make the map element 
    var width = 1000; 
    var height = 1000; 
    var svg = d3.select("#Map") 
    .append("svg") 
    .attr("id", "chosvg") 
    .attr("height", height) 
    //.attr("viewBox", "0 0 600 600") 
    .attr("width", width) 
    .style("preserveAspectRatio", "true"); 

    cbsa = svg.append("g"); 
d3.json("data/us-cbsa.json", function(json) { 
    cbsa.selectAll("path") 
     .attr("id", "cbsa") 
     .data(json.features) 
     .enter() 
     .append("path") 
     .attr("class", data ? quantize : null) //data ? value_if_true : value_if_false -- ternary operator 
     .attr("d", path) 
     .on("click", clicked); 
}); 

в функции щелкнутой(), у меня есть зум, как это, который работает, но только с определенной шириной окна

 cbsa.transition() 
     .duration(750) 
     .attr("transform", "translate(" + width/2 + "," + height/2 + ")scale(" + k + ")translate(" + -x + "," + -y + ")") 
     .style("stroke-width", 1.5/k + "px"); 

Для ясности, я идеально loooking что-то вроде: var width = column.width() // или что-то использование процентов

Я могу включить свой html, если это поможет.

Answer 1

Вы можете получить ширину столбца по телефону:

var bb = document.querySelector ('#Map') 
        .getBoundingClientRect(), 
     width = bb.right - bb.left; 

В зависимости от браузера, то bb может уже width собственности. Имейте в виду, что столбец может выглядеть шире, потому что начальный размер svg слишком велик, поэтому его родительский столбец тоже может быть.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect