Question

我将D3饼图添加到SVG地图图表，并将它们锚定到城市lat + lon坐标。这一切都很好。我很难根据数据中的“值”来改变每个饼图的大小。

任何人都可以帮助我理解如何更改每个项目的弧变量，我认为这对每个饼图的半径负责吗？我已经尝试了一些我在搜索中找到的不同方法，但为了得到饼图，我会重写我的大部分代码，我希望它可以从这里开始？

以下是我创建和添加饼图的代码部分：

// Add piecharts to map
        // I need to implement something like this
        // but not sure how I do that for each pie chart
        // d3.svg.arc().innerRadius(0).outerRadius(d.value)

        var arc = d3.svg.arc().innerRadius(0).outerRadius(15),               
            pie = d3.layout.pie()
            .value(function(d){ 
                return d });

          var pies = svg.selectAll('.pie')
            .data(data)
            .enter()
            .append('g')
            .attr('class', 'pie')
            .attr("transform", function(d) {
              return "translate(" + projection([d.lon, d.lat])[0] + "," + projection([d.lon, d.lat])[1] + ")";
            });

          var color = d3.scale.ordinal().range(["#3f71b0", "#e11c42"]);


          pies.selectAll('.slice')
            .data(function(d){
                return pie([d.value, d.subset]); })
            .enter()
            .append('path')
            // I think this is where I need to implement a loop
            .attr('d', arc)
            .style('fill', function(d,i){
              return color(i);
            })
            .style("opacity", 1)
            .style("stroke", "#fff")
            .style("stroke-width", "1.5");

提前感谢任何建议！

-dt

D3.js多个饼图调整大小

0 个答案: