Как использовать Масштабирование с пирогом в диаграммах D3?

У меня есть код для построения круговой диаграммы. Проблема в том, что когда я увеличиваю круговую диаграмму, она выходит из раздела, внутри которого она размещена. Я искал в google и узнал, что есть функция .zoom для диаграмм D3, чтобы достичь этого. Кто-нибудь может мне помочь, как я могу это сделать? график должен быть виден во всех средствах массовой информации, как в настольных, мобильных, 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

control + Прокрутка мыши @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 не является функцией ** –

I Я не использую z.copy в любом из моего кода, так что, возможно, это на вашей стороне ?? – thatOneGuy

нет не на myside тоже .. Я дал вам весь код выше. Не могу найти в google слишком –

Как использовать Масштабирование с пирогом в диаграммах D3?

ответ

Смежные вопросы