Question

我有绘制饼图的代码。问题是，当我缩放饼图时，它会离开它所在的分区。我在谷歌上搜索并且知道有D3图表的.zoom函数来实现这一点。任何人都可以帮我，我该怎么做？图表应该在桌面，移动设备，iPad等所有媒体中都可见。

        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);

Answer 1

您尚未实现适当的缩放功能。 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的例子

如何在D3图表中使用Zooming with Pie？

1 个答案: