Блог

У меня есть CSV-файл, содержащий сотни строк, вот пример :

city.csv:

 City,JanTemp,Lat,Long
Indianapolis  IN,21,39.8,86.9
Des_Moines  IA,11,41.8,93.6
Wichita  KS,22,38.1,97.6
Louisville  KY,27,39,86.5
New_Orleans LA,45,30.8,90.2
Portland  ME,12,44.2,70.5
Baltimore  MD,25,39.7,77.3
Boston  MA,23,42.7,71.4
Detroit  MI,21,43.1,83.9
Minneapolis  MN,2,45.9,93.9
St_Louis  MO,24,39.3,90.5
Helena  MT,8,47.1,112.4
Omaha  NE,13,41.9,96.1
Concord  NH,11,43.5,71.9
Atlantic_City  NJ,27,39.8,75.3
Albuquerque  NM,24,35.1,106.7
Albany  NY,14,42.6,73.7
New_York  NY,27,40.8,74.6
  

Что я хочу сделать, так это создать круговую диаграмму, представляющую JanTemp для каждых 10 строк.

Вот мой исходный код для создания круговой диаграммы для всех строк :

скрипт:

 <script>



        var width = 500;
        var height = 500;
        var radius = Math.min(width, height) / 2;
        var donutWidth = 120;
        var legendRectSize = 18;
        var legendSpacing = 4;

        var color = d3.scale.category20();

        var svg = d3.select('#chart')
          .append('svg')
          .attr('width', width)
          .attr('height', height)
          .append('g')
          .attr('transform', 'translate('   (width / 2)   
            ','   (height / 2)   ')');

        var arc = d3.svg.arc()
          .innerRadius(radius - donutWidth)
          .outerRadius(radius);

        var pie = d3.layout.pie()
          .value(function(d) { return d.JanTemp; })
          .sort(null);

        d3.csv('city.csv', function(error, dataset) {           
          dataset.forEach(function(d) {                             
            d.JanTemp =  d.JanTemp;                                     
          });                                                       

          var path = svg.selectAll('path')
            .data(pie(dataset))
            .enter()
            .append('path')
            .attr('d', arc)
            .attr('fill', function(d, i) { 
              return color(d.data.City);
            });

          var legend = svg.selectAll('.legend')
            .data(color.domain())
            .enter()
            .append('g')
            .attr('class', 'legend')
            .attr('transform', function(d, i) {
              var height = legendRectSize   legendSpacing;
              var offset =  height * color.domain().length / 2;
              var horz = -2 * legendRectSize;
              var vert = i * height - offset;
              return 'translate('   horz   ','   vert   ')';
            });

          legend.append('rect')
            .attr('width', legendRectSize)
            .attr('height', legendRectSize)
            .style('fill', color)
            .style('stroke', color);

          legend.append('text')
            .attr('x', legendRectSize   legendSpacing)
            .attr('y', legendRectSize - legendSpacing)
            .text(function(d) { return d; });                       

        });                                                         


    </script>
  

Код работает, но визуализация плохая.

Вопрос в следующем : Как я могу создать круговую диаграмму для каждых 10 строк в CSV — файле ? (Где также я могу добавить свойство, чтобы получать строки только по 10 ?) Возможно ли это вообще?

У вас есть два способа сделать это, первый — просто повторить то, что у вас уже есть, и создать несколько SVG-файлов, по одному для каждой точечной диаграммы.

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

 function( alldata ) {
    var dataDivide = [], i, chunk = 10; 
    for (i=0; i<alldata.length; i =chunk)          
    {
         dataDivide.push(alldata.slice(i, i chunk));
    }
}
  

Теперь вы можете использовать D3 для разделения вашего SVG, а затем задать фрагменты, которые будут вашими данными для каждой точечной диаграммы:

     var svg.selectAll("g")
        .data( dataDivide )
        .enter()
        .append("g")
            // position the g, etc.
        .selectAll('path') 
        .data( function(d) {
            return pie(d); // d is a chunk
        }) 
        .enter() 
        .append('path')
            // etc.