Мобильная версияЯ создал следующую круговую диаграмму, используя приведенный здесь код. Он отлично работает на ноутбуке, но не на мобильном телефоне, и я пытаюсь понять, почему. Это мой первый проект в d3, и я пытался прочитать документацию, но примеры стандартных гистограмм, похоже, не применимы к этому случаю, поэтому я не знаю, как это сделать.
PS: Под «не работает» я имею в виду, что диаграмма не центрирована, не видна полностью и метки исчезли.
Для справки: эта версия находится здесь, внизу страницы. ( Я отредактировал ссылку, раньше была общая ссылка)
Это мой index.html
HTML
Название страницы Основной заголовок Круговая полоса // устанавливаем размеры и поля графика var Margin = {сверху: 0, справа: 10, снизу: 30, слева: 10}, ширина = 460 - поле.лево - поле.право, высота = 460 - маржа.верх - маржа.дно, внутреннийРадиус = 90, внешнийРадиус = Math.min(ширина, высота)/2; // внешний радиус идет от середины области SVG к границе // добавляем объект SVG var svg = d3.select("#my_dataviz") .append("SVG") .attr("ширина", ширина + поле.лево + поле.право) .attr("высота", высота + поле.верх + поле.дно) .append("г") .attr("transform", "translate(" + (ширина / 2 + поля слева) + "," + (высота / 2 + поля сверху) + ")"); d3.csv("static/time_distribution.csv", функция(данные) { var maxCount = d3.max(data, function(d) { return +d.count; }); // Весы вар х = d3.scaleBand() .range([0, 2 * Math.PI]) // Ось X изменяется от 0 до 2pi = по всему кругу. Если я остановлюсь на 1Pi, это будет примерно полукруг. .align(0) // Это ничего не делает .domain(data.map(function(d) { return d.hour; })); // Областью оси X является список состояний. вар y = d3.scaleRadial() .range([innerRadius, externalRadius]) // Домен будет определен позже. .domain([0, maxCount]); // Домен Y от 0 до максимума, видимого в данных // Добавляем бары svg.append("г") .selectAll("путь") .data(данные) .входить() .append("путь") .attr("заполнить", "#1DB954") .attr("обводка", "черный") .attr("stroke-width", 3) // Устанавливаем ширину границы .attr("d", d3.arc() // представьте, что вы выполняете часть кольцевого графика .innerRadius(внутреннийрадиус) .outerRadius(function(d) { return y(d['count']); }) .startAngle(function(d) { return x(d.hour); }) .endAngle(function(d) { return x(d.hour) + x.bandwidth(); }) .padAngle(0.01) .padRadius(внутреннийрадиус)) // Добавляем метки svg.append("г") .selectAll("г") .data(данные) .входить() .append("г") .attr("text-anchor", function(d) { return (x(d.hour) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "end " : "начинать"; }) .attr("transform", function(d) { return "rotate(" + ((x(d.hour) + x.bandwidth() / 2) * 180 / Math.PI - 90) + ")"+" Translate(" + (y(d['count'])+10) + ",0)"; }) .append("текст") .text(функция(d){возврат(д.час)}) .attr("transform", function(d) { return (x(d.hour) + x.bandwidth() / 2 + Math.PI) % (2 * Math.PI) < Math.PI ? "rotate(180) )" : "повернуть(0)"; }) .style("размер шрифта", "15 пикселей") .style("семейство шрифтов", "Готэм") .style("вес шрифта", "500") .attr("базовая линия выравнивания", "средний") }); CSS Это потенциально актуальные стили CSS
html { переполнение-х: скрыто; поле справа: Calc(-1 * (100vw - 100%)); } тело { дисплей: гибкий; гибкое направление: столбец; оправдание-содержание: центр; минимальная высота: 100vh; /* Устанавливаем минимальную высоту страницы */ выровнять-элементы: по центру; маржа: 0; семейство шрифтов: «Круговой», без засечек; цвет фона: #f3f3f3; /* Устанавливаем светлый цвет фона */ фоновое изображение: радиальный градиент (круг в центре, #f5f5f5, #f5f5f5), повторяющийся радиальный градиент (круг в центре, #f5f5f5, #f5f5f5 10 пикселей, прозрачный 20 пикселей, прозрачный 10 пикселей); режим наложения фона: умножить; фоновое вложение: исправлено; /* Сохраняем фон при прокрутке */ } .section-title { дисплей: блок; семейство шрифтов: «Готэм», без засечек; поле внизу: 0 пикселей; текстовая тень: 1px 1px 1px rgba(0, 0, 0, 0.2); фон: линейный градиент (45 градусов, #333, #000); /* Градиентный фон */ -webkit-background-clip: текст; /* Вырезаем текст на фон */ фоновый клип: текст; -webkit-text-fill-color: прозрачный; /* Скрыть заливку текста, чтобы отобразить градиент */ } @media (max-width: 500 пикселей) { /* 500 должно быть достаточно для мобильных устройств */ тело { переполнение-х: скрыто; ширина: 100%; -webkit-box-sizing: граница-коробка; -moz-box-sizing: граница-коробка; размер коробки: граница-коробка; } html { переполнение-х: скрыто; } Данные Вот данные, которые я использую, хотя сомневаюсь, что это имеет значение:
час,количество 1,3 2,0 3,0 4,0 5,0 6,0 7,0 8,0 9,0 10,0 11,0 12,0 13,0 14,0 15,10 16,0 17,7 18,7 19,0 20,0 21,0 22,0 23,0 24,5 Скриншот проблемы с ярлыком это происходит как в Safari, так и в Chrome на моем iPhone13 mini.
