如何在D3圖表中使用縮放餅圖？

我有繪製餅圖的代碼。問題是當我放大餅圖它出去它被放置的部門。我搜索了谷歌，並知道有D3圖表的.zoom功能來實現這一目標。任何人都可以幫助我，我該怎麼做？圖應該是可見的在所有的媒體就像在桌面，手機，ipad的如何在D3圖表中使用縮放餅圖？

 var canvasWidth = this.getWidth(), //width 
     canvasHeight = this.getHeight(), //height 
     outerRadius = 75, 
     margin = {top: 20, right: 20, bottom: 30, left: 40},//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 - 20) + ',' + canvasHeight/2 +')'); 


     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 

     var arcs = vis.selectAll("g.slice") 
     .data(pie) 
     .enter() 
     .append("svg:g") 
     .attr("class", "slice"); //allow us to style things in the slices (like text) 

     arcs.append("svg:path") 
     .attr("fill", function(d, i) { return color(i); }) 
     .attr("d", arc); 

     arcs.append("svg:text") 
     .attr("transform", function(d) { //set the label's origin to the center of the arc 
     d.outerRadius = outerRadius + 50; // Set Outer Coordinate 
     d.innerRadius = outerRadius + 45; // Set Inner Coordinate 
     return "translate(" + arc.centroid(d) + ")"; 
     }) 
     .attr("text-anchor", "middle") //center the text on it's origin 
     .style("fill", "Purple") 
     .style("font", "bold 12px Arial") 
     .text(function(d, i) { return data[i].legendLabel; }); //get the label from our original data array 

     arcs.filter(function(d) { return d.endAngle - d.startAngle > .2; }).append("svg:text") 
     .attr("dy", ".35em") 
     .attr("text-anchor", "middle") 
     .attr("transform", function(d) { //set the label's origin to the center of the arc 
     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; }); 

     function angle(d) { 
     var a = (d.startAngle + d.endAngle) * 90/Math.PI - 90; 
     return a > 90 ? a - 180 : a; 
     }

我發現一個小碼

   var zoom = d3.behavior.zoom() 
       .x(xScale) 
       .on('zoom', zoomed);

來源

2016-08-16 Tejas Masurkar

您目前在做什麼來放大？ – thatOneGuy

控制+鼠標滾動@thatOneGuy其正常縮放整個頁面正在縮放，整個頁面正在縮小。 –

[link]（http://blog.scottlogic.com/2014/09/19/d3-svg-chart-performance.html） –

您還沒有實施適當的縮放功能。 D3有這個。這裏有一個例子：

var zoom = d3.behavior.zoom() 
    .scaleExtent([1, 10]) 
    .on("zoom", zoomed); 

function zoomed() { 
    container.attr("transform", "translate(" + d3.event.translate + ")scale(" + d3.event.scale + ")"); //the container here is the part of the SVG you wish to zoom into 
} 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.right + ")") 
    .call(zoom); //here is the main call.

下面是一個例子：https://bl.ocks.org/mbostock/6123708

這不是一個餅圖，但它的工作無論哪種方式。就在我有容器的地方，把你的餅圖容器放在這裏。網上有很多示例可供放大D3

來源

2016-08-16 09:51:40 thatOneGuy

我得到這個錯誤** z.copy不是函數** –

我我沒有在我的任何代碼中使用z.copy，所以也許它在你身邊？ – thatOneGuy

不要吝嗇太..我給你上面的整個代碼。也找不到谷歌 –

如何在D3圖表中使用縮放餅圖？

回答

相關問題