Выстраивание кругов в ряды

Я пытаюсь взять массив длиной 50 и иметь некоторый контроль над тем, как эти круги добавляются, когда данные привязаны к ним с помощью d3. В моем случае с 50 кругами мне нужно 5 рядов и 10 столбцов кругов. Лучшее, что я мог придумать, это следующий фрагмент:

var margins = {top:20, bottom:300, left:30, right:100};

var height = 600;
var width = 900;

var totalWidth = width+margins.left+margins.right;
var totalHeight = height+margins.top+margins.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr('width', totalWidth)
    .attr('height', totalHeight);

var graphGroup = svg.append('g')
    .attr('transform', "translate("+margins.left+","+margins.top+")");

var circData = new Array(50);

var rowMarker = 1;

graphGroup.selectAll('circle')
    .data(circData)
    .enter()
    .append('circle')
    .attr('cx', function(d,i) { return i*30})
    .attr('cy', function(d,i) {
      if (i%10) {
        rowMarker += 1;
      }
      return rowMarker*30;
    })
    .attr('r', 10)
    .style('fill', 'gray');

<script src = "https://d3js.org/d3.v5.min.js"></script>

Что должно произойти, так это то, что rowMarker достигает нового целочисленного приращения каждый раз, когда функция продвигается на десять элементов глубже, измеряемых индексом i. Тем не менее, кажется, что круги добавляются так, что их значения атрибутов y больше, чем можно было бы ожидать, если бы rowMarker обновлялся только каждую строку.

Вопрос

Есть ли способ помочь мне сопоставить мои круги с данными в «матрице кругов» 5x10, как я пытался выше? Если да, то какая логика нужна?

javascript d3.js

30.04.2019 09:44

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема с вашим кодом в том, что это...

if (i%10)

... будет true для всего, кроме первого значения i (то есть нуля) и кратных 10.

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

var maxColumn = 10;

... а затем используйте оператор по модулю для значений x и y:

.attr('cx', function(d, i) {
    return (i % maxColumn) * 30
})
.attr('cy', function(d, i) {
    return (~~(i / maxColumn) % maxColumn) * 30
})

Вот ваш код с этим изменением:

var margins = {
  top: 20,
  bottom: 300,
  left: 30,
  right: 100
};

var height = 600;
var width = 900;

var totalWidth = width + margins.left + margins.right;
var totalHeight = height + margins.top + margins.bottom;

var svg = d3.select('body')
  .append('svg')
  .attr('width', totalWidth)
  .attr('height', totalHeight);

var graphGroup = svg.append('g')
  .attr('transform', "translate(" + margins.left + "," + margins.top + ")");

var circData = new Array(50);

var maxColumn = 10;

graphGroup.selectAll('circle')
  .data(circData)
  .enter()
  .append('circle')
  .attr('cx', function(d, i) {
    return (i % maxColumn) * 30
  })
  .attr('cy', function(d, i) {
    return (~~(i / maxColumn) % maxColumn) * 30
  })
  .attr('r', 10)
  .style('fill', 'gray');

<script src = "https://d3js.org/d3.v5.min.js"></script>

30.04.2019 09:54

Другие вопросы по теме

Flask — запись временного CSV для чтения D3

Четверная иерархия в пузырьковой диаграмме, кликабельная с помощью d3js

Не удается установить X и Y, показывая значения NaN при добавлении нового узла?

Извлечение значений для всплывающей подсказки

Используйте координаты события мыши D3 в компонентах Vue.js

Как сделать шкалу времени оси X с равным интервалом между элементами на графике независимо от временного диапазона

«Uncaught ReferenceError: DOM не определен»

Применение функции переноса Bostock к тексту

Добавить месяц отступа от минимальной даты

Angular/SVG - захват ширины элемента при загрузке страницы

Выстраивание кругов в ряды

Вопрос

Ответы 1

Другие вопросы по теме

Похожие вопросы