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

如何从饼图中仅选择csv文件中的x行

的 city.csv ：

脚本：

1 个答案: