Как я могу создать несколько квадратов в d3?

#javascript #jquery #loops #d3.js #svg

#javascript #jquery #циклы #d3.js #svg

Вопрос:

У меня есть интерактивная страница, на которой мне нужно, чтобы на странице отображалось несколько квадратов с использованием d3 со следующими значениями: 1, 4, 5, 16, 107, 465 и 1745 год. Я не хочу копировать и вставлять этот фрагмент SVG несколько раз.

Как я могу сгенерировать эти квадраты в d3?

index.html

 <svg width="50" height="50">
    <rect x="0" y="0" width="10" height="10" fill="#c62828">
</svg>

1. Помимо попыток многократного копирования и вставки квадратов, я взглянул на этот пример, но мне неясно, как он создает сетку квадратов: http://bl.ocks.org/eesur/3fc83ddc4c060e6bd43e

2. Вы хотите, чтобы квадраты были расположены в сетке? В коде, на который вы ссылаетесь, какая конкретная часть вас смущает? Это очень простой d3 код, поэтому любой ответ, который я придумаю, я буду повторять этот пример…

3. @Отметить не в сетке как таковой. Я просто хочу, чтобы на странице отображалось столько квадратов в таком порядке: 1, 4, 5, 16, 107, 465 и 1745 год.

Ответ №1:

Вот самый короткий и «чистый» d3 код, который соответствует тому, что я понимаю из вашего вопроса. Я прокомментировал это, поэтому дайте мне знать, если что-то не имеет смысла:

 <!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@4.0.0" data-semver="4.0.0" src="https://d3js.org/d3.v4.min.js"></script>
  </head>

  <body>
    
    <script>
    
    // number of rects
    var data = [1, 4, 5, 16, 107, 465, 1745];
         
    var squareDim = 10, // pixel dimensions of square
        width = 400,
        height = (squareDim * d3.max(data))   squareDim; // based on the max of my squares, how tall am I going to be
        
    var svg = d3.select('body')
      .append('svg')
      .attr('width', width)
      .attr('height', height); // create my svg node
    
    var row = 0;
    svg.selectAll('rectGroup')
      .data(data)
      .enter()
      .append('g') // for each data point create a group
      .selectAll('rect')
      .data(function(d){
        return d3.range(d); // this creates an array of [1, 2, 3 ... N] where N is a datum in your rect data
      }) // this is a sub selection, it allows you to define a sub dataset
      .enter()
      .append('rect')
      .attr('width', squareDim)
      .attr('height', squareDim)
      .attr('x', function(d,i,j){
        return data.indexOf(j.length) * (squareDim   2);
      }) // determine the x position
      .attr('y', function(d){
        return d * (squareDim   2);  // and y
      })
      .style('fill', '#c62828');
      
    </script>
    
  </body>

</html>

1. Мне любопытно, почему он принимает такую форму? Возможно ли разбить их на строки по 30 или 100?

2. @AndrewNguyen, он принимает такую форму, потому что я так сказал :). «Форма» определяется атрибутами x и y . data.indexOf(j.length) * (squareDim 2); по сути, я говорю, на какой базовой точке я нахожусь, теперь переместите на 22 пикселя и запустите следующий столбец. Да, их можно расположить так, как вы хотите, это просто математика. Попробуйте и возвращайтесь, когда у вас возникнут конкретные проблемы.

3. Я лично считаю, что вам не следовало отвечать на этот вопрос. Это слишком расплывчато, пока не показывает никаких усилий при попытках, и конкретная проблема не была выделена. Как вы заявляете, исходя из того, что вам удалось понять. Я бы рекомендовал отметить вопрос или, по крайней мере, не кормить справочных вампиров

4. @Ian, ты, наверное, прав. Я надеялся, однако, что небольшой пример кода просветит OP и подтолкнет их к разработке собственного решения. Вместо этого я просто получил больше требований…

5. Похоже, возникает проблема, когда два целых числа в массиве совпадают, это связано с тем, что indexOf находит первое вхождение значения в массиве.