如何 select 饼图的 csv 文件中的 x 行

Question

我有一个包含数百行的 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

我想要做的是创建一个代表每 10 行 JanTemp 的饼图。

这是我为所有行创建饼图的初始代码：

脚本：

<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>

代码可以运行，但可视化效果不佳。

问题是：如何为 csv 文件中的每 10 行创建一个饼图？（我还可以在哪里添加属性以仅获取 10 行？）甚至可能吗？

Answer 1

您有两种方法可以做到这一点，第一种是简单地重复已有的内容并创建多个 SVG，每个饼图一个。

第二个更优雅一些，涉及由 D3 控制的单个 SVG。您首先需要将数据重新排序为 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.

如何 select 饼图的 csv 文件中的 x 行

How to select only x rows from a csv file for a pie chart

d3.js

data-visualization

pie-chart

city.csv:

脚本：