D3 - attr "r" по сравнению с общим размером экрана

Question

Это может быть немного не в порядке, но я пытаюсь сопоставить атрибут «r» круга в общей ширине экрана размер. Я хочу сделать это, потому что у меня есть карта topojson d3 и некоторые точки с окружностью в км, и я думаю, было бы здорово построить их размер r в предоставленном километре по сравнению с фактическим размером на карте.

Таким образом, между сторонами это было бы около 40006 км (вокруг земли), поэтому я пытаюсь настроить конверсию, чтобы она выглядела (вроде) реального размера.

Так что я пытаюсь определить, есть ли значение г, что именно или очень близко к 100% от ширины так wuld быть как

x         data in km 
_________   convert   ___________ 
100% width r       40006 km 

где х должен быть размер г им находясь в поиске.

Таким образом, у меня есть карта, которая вписывается в div, и мне интересно, будет ли какой-то способ определения значения r, которое будет составлять 100% от этой ширины экрана. Благодаря!

Answer 1

Чтобы решить эту проблему, создать шкалу:

var scale = d3.scale.linear() 
    .domain([0, 40006]) 
    .range([0, screenWidth]); 

И затем использовать его, чтобы получить одно значение, например:

scale(40006) // Outputs the screen width 

Или использовать его при создании точек, более или меньше, как это:

svg.selectAll(".point").data(pointsData) 
    .enter().append("circle") 
     .attr("class", "point") 
     .attr("r", scale) 
     .attr("cx", ...) 
     .attr("cy", ...); 

более подробную информацию о масштабах, проверьте D3's wiki.

Чтобы получить ширину экрана, pick your poison.