Question

我是D3 JS的新手，我正在努力为我的问题找到合适的解决方案。

我想从单独的数据集变量中将一组新数据添加到图表中。最多5个值并且在单独的行上。

删除彩色矩形和图例名称后，我希望新值位于上一个图例之前的中间位置。

var dataset = [
{ name: 'IE', percent: 39.10 },
{ name: 'Chrome', percent: 32.51 },
{ name: 'Safari', percent: 13.68 },
{ name: 'Firefox', percent: 8.71 },
{ name: 'Others', percent: 6.01 }
];

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

var w=300,h=300;

var outerRadius=w/2;
var innerRadius=100;

var color = d3.scale.category10();

var arc=d3.svg.arc()
  .outerRadius(outerRadius)
  .innerRadius(innerRadius);

var svg=d3.select("#chart")
  .append("svg")
  .attr({
      width:w,
      height:h,
      class:'shadow'
  }).append('g')
  .attr({
      transform:'translate('+w/2+','+h/2+')'
  });
var path=svg.selectAll('path')
  .data(pie(dataset))
  .enter()
  .append('path')
  .attr({
      d:arc,
  fill:function(d,i){
      return color(d.data.name);
  }
  });

path.transition()
  .duration(1000)
  .attrTween('d', function(d) {
      var interpolate = d3.interpolate({startAngle: 0, endAngle: 0}, d);
      return function(t) {
          return arc(interpolate(t));
      };
  });


var restOfTheData=function(){
    var text=svg.selectAll('text')
        .data(pie(dataset))
        .enter()
        .append("text")
        .transition()
        .duration(200)
        .attr("transform", function (d) {
            return "translate(" + arc.centroid(d) + ")";
        })
        .attr("dy", ".4em")
        .attr("text-anchor", "middle")
        .text(function(d){
            return d.data.percent+"%";
        })
        .style({
            fill:'#fff',
            'font-size':'10px'
        });

    var legendRectSize=20;
    var legendSpacing=7;
    var legendHeight=legendRectSize+legendSpacing;


    var legend=svg.selectAll('.legend')
        .data(color.domain())
        .enter()
        .append('g')
        .attr({
            class:'legend',
            transform:function(d,i){
                //Just a calculation for x & y position
                return 'translate(-35,' + ((i*legendHeight)-65) + ')';
            }
        });
    legend.append('rect')
        .attr({
            width:legendRectSize,
            height:legendRectSize,
            rx:20,
            ry:20
        })
        .style({
            fill:color,
            stroke:color
        });

    legend.append('text')
        .attr({
            x:30,
            y:15
        })
        .text(function(d){
            return d;
        }).style({
            fill:'#929DAF',
            'font-size':'14px'
        });
};

setTimeout(restOfTheData,1000);

这是该网站的代码：

http://www.adeveloperdiary.com/d3-js/create-a-simple-donut-chart-using-d3-js/

Answer 1

原始数据集位于文件顶部：

lead(status_date) OVER (
                           ORDER BY id, status_date
                       )

您可以通过这种方式进行修改，只需添加数据（注意我更改了名称和值）。这段代码将支持尽可能多的行，但请记住它没有实现计算百分比，因此您需要将值的总和保持为var dataset = [ { name: 'IE', percent: 39.10 }, { name: 'Chrome', percent: 32.51 }, { name: 'Safari', percent: 13.68 }, { name: 'Firefox', percent: 8.71 }, { name: 'Others', percent: 6.01 } ];。

这是实现这个的原始codepen的一个分支：

http://codepen.io/anon/pen/XRxjxo

D3 JS附加一个包含3个新键值对的新文本框

1 个答案: