Question

我面临着获得超过30个传说的问题，并且传说无法以垂直方式也不能以横向方式显示。我想将滚动条添加到只有图例框，以便所有图例都可以通过滚动显示，或者是否有任何方法可以并排添加图例，如同连续3个

我尝试添加溢出属性但无法正常工作。以下是我的代码

 var data =[];
for(var p = 0 ;p <unique.length;p++)
{
 data.push({
  legendLabel:unique[p],
  magnitude:uniquecount[p]
 });
}



var canvasWidth = this.getWidth(), //width
      canvasHeight = this.getHeight(),   //height
      outerRadius = 60,   //radius
      color = d3.scale.category20(); //builtin range of colors




 var vis = d3.select("#"+this.htmlObject)
      .append("svg:svg") //create the SVG element inside the <body>
        .data([data]) //associate our data with the document
        .attr("width", canvasWidth) //set the width of the canvas
        .attr("height", canvasHeight) //set the height of the canvas
        .append("svg:g") //make a group to hold our pie chart
          .attr("transform", "translate(" + 1.5*outerRadius + "," + 1.5*outerRadius + ")") // relocate center of pie to 'outerRadius,outerRadius'
      .attr('transform', 'translate(' + (canvasWidth/2 -  50) +  ',' + canvasHeight/2 +')');

         vis.append("text")
        .attr("x",50)             
        .attr("y", -110)
        .attr("text-anchor", "middle")  
        .style("font-size", "14px") 
        .text("Response Code vs Count(Last 20 Mins)");


        if(unique.length === 0)
        {

         vis.append("text")
        .attr("x",50)             
        .attr("y", 0)
        .attr("text-anchor", "middle")  
        .style("font-size", "12px") 
        .text("No Failure Transactions");
        }

    // This will create <path> elements for us using arc data...
    var arc = d3.svg.arc()
      .outerRadius(outerRadius);

    var pie = d3.layout.pie() //this will create arc data for us given a list of values
      .value(function(d) { return d.magnitude; }); // Binding each value to the pie


    // Select all <g> elements with class slice (there aren't any yet)
    var arcs = vis.selectAll("g.slice")
      // Associate the generated pie data (an array of arcs, each having startAngle,
      // endAngle and value properties) 
      .data(pie)
      // This will create <g> elements for every "extra" data element that should be associated
      // with a selection. The result is creating a <g> for every object in the data array
      .enter()
      // Create a group to hold each slice (we will have a <path> and a <text>
      // element associated with each slice)
      .append("svg:g")
      .attr("class", "slice");    //allow us to style things in the slices (like text)

    arcs.append("svg:path")
      //set the color for each slice to be chosen from the color function defined above
      .attr("fill", function(d, i) { return color(i); } )
      .attr("data-legend",function(d) { return d.data.legendLabel +"->" + d.data.magnitude})
      //this creates the actual SVG path using the associated data (pie) with the arc drawing function
      .attr("d", arc);


    // Add a magnitude value to the larger arcs, translated to the arc centroid and rotated.
    arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text")
      .attr("dy", ".35em")
      .attr("text-anchor", "middle")
      //.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")"; })
      .attr("transform", function(d) { //set the label's origin to the center of the arc
        //we have to make sure to set these before calling arc.centroid
        d.outerRadius = outerRadius; // Set Outer Coordinate
        d.innerRadius = outerRadius/2; // Set Inner Coordinate
        return "translate(" + arc.centroid(d) + ")rotate(" + angle(d) + ")";
      })
      .style("fill", "White")
      .style("font", "bold 12px Arial")
      .text(function(d) { return d.data.magnitude; });

       legend = vis.append("g")
    .attr("class","legend")
    .attr("overflow-y","auto")    
    .attr("transform","translate(70,-50)")
    .style("font-size","13px")
    .call(d3.legend);   




    // Computes the angle of an arc, converting from radians to degrees.
    function angle(d) {
       var a = 180;
      return a > 90 ? a - 180 : a;
    }
  }
  else
  {
    var canvasWidth = this.getWidth(), //width
      canvasHeight = this.getHeight(),   //height
      outerRadius = 75,   //radius
      color = d3.scale.category20(); //builtin range of colors




       var viN = d3.select("#"+this.htmlObject)
      .append("svg:svg") //create the SVG element inside the <body>
        .attr("width", canvasWidth) //set the width of the canvas
        .attr("height", canvasHeight) //set the height of the canvas
        .append("svg:g"); //make a group to hold our pie chart



     viN.append("text")
        .attr("x",200)             
        .attr("y", 30)
        .attr("text-anchor", "middle")  
        .style("font-size", "14px") 
        .text("Response Code vs Count(Last 20 Mins)");

    viN.append("text")
        .attr("x",200)             
        .attr("y", 100)
        .attr("text-anchor", "middle")  
        .style("font-size", "12px") 
        .text("No data Found");
  }

D3饼图为Legends添加滚动条

0 个答案: