Добавить объекты, равные сумме каждого элемента в массиве - PullRequest
Новая
       22

Добавить объекты, равные сумме каждого элемента в массиве

1 голос
/ 16 марта 2019

У меня есть массив: circleArray = [1, 4, 2]. И теперь я хочу создавать круги. index относится к строке . Я хочу, чтобы они отображались. Значение каждого элемента относится к количеству кружков в конкретной строке.

Вот как это должно выглядеть:

enter image description here

Вот что я пробовал: 

// Circle Attributes
var nodeRadius = 20;
var xStart = 200, yStart = 50;
var xMargin = 50, yMargin = 50;

var circleArray = [1, 4, 2];

// SVG Viewport
var svgContainer = d3.select("body")
                      .append("svg")
                      .attr("width", 300)
                      .attr("height", 600);

// Append Circles                      
var circle = svgContainer.selectAll("circle")
              .data("circleArray")
              .enter()
              .append("circle")
                .attr("cx", function(d) { return d * xMargin + xStart; })
                .attr("cy", function(d,i) { return i * yMargin + yStart; })
                .attr("r", 20);
<body></body>
<script src="https://d3js.org/d3.v5.min.js"></script>

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

1 Ответ

4 голосов
/ 16 марта 2019

Самый простой способ сделать это - использовать массив данных для добавления групп ... 

var group = svgContainer.selectAll(null)
  .data(circleArray)
  .enter()
  .append("g")
  //etc...

... и затем для каждой группы использовать значение элемента данных для создания другой массив с количеством кружков, которое вы хотите для каждой строки: 

var circles = group.selectAll(null)
  .data(function(d) {
    return d3.range(d)
  })
  .enter()
  .append("circle")
  //etc...

В этом случае мы получаем данные каждой группы ... 

.data(function(d) {
    return d3.range(d)
})

... и передать его в d3.range(), который создает следующие массивы:

  • [0]
  • [0, 1, 2, 3]
  • [0, 1]

Эти значения используются при выборе кругов.Конечно, сами значения не имеют значения, только длина каждого массива.

Вот демонстрационная версия (полная магических чисел, измените их соответственно): 

// Circle Attributes
var nodeRadius = 20;

var circleArray = [1, 4, 2];

// SVG Viewport
var svgContainer = d3.select("body")
  .append("svg")
  .attr("width", 300)
  .attr("height", 300);

var group = svgContainer.selectAll(null)
  .data(circleArray)
  .enter()
  .append("g")
  .attr("transform", function(d, i) {
    return "translate(" + (300 / 2 - ((d / 2) * 50)) + "," + (50 + 50 * i) + ")";
  });

var circles = group.selectAll(null)
  .data(function(d) {
    return d3.range(d)
  })
  .enter()
  .append("circle")
  .attr("cx", function(d) {
    return d * 50;
  })
  .attr("r", nodeRadius)
  .style("fill", "red");
<body></body>
<script src="https://d3js.org/d3.v5.min.js"></script>

PS: не относится к вашей проблеме, но .data("circleArray") неверно.это должно быть .data(circleArray).

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...