d3.js 创建饼图但呈方形答案

【问题标题】：d3.js create the pie chart but square shapedd3.js 创建饼图但呈方形
【发布时间】：2015-10-11 17:52:45
【问题描述】：

刚开始使用 d3.js 和 javascript。我有这个奇怪的图表要求。想要创建与饼图完全一样的图表，但呈方形。如下所示。

所以，我想，可能是我创建饼图并在饼图之间添加正方形并删除正方形之外的部分。但是，它还没有奏效。

其次，我想，我可以用 CSS 做到这一点。我这样做了。但是，我对这个解决方案不满意。这太hacky了。有人可以帮我提供好的解决方案吗？

//// Done this to create the square.
var svgContainer = d3.select("#square").append("svg")
                       .attr("width", 200)
                       .attr("height", 200);

var rectangle = svgContainer.append("rect")
                    .attr("x", 0)
                    .attr("y", 0)
                    .attr("width", 200)
                    .attr("fill", '#ec4c4a')
                    .attr("height", 200); 

// Done this to create the pie chart. Found this example some where.
var element_id = 'pie'
var elementSelector = '#pie';

        svgWidth = 390;
        svgHeight = 320;
        svgInnerRadius = 0;
        svgOuterRadius = 145;
        heightOffset = 0;
        scoreFontSize = '49px';

        $(elementSelector).replaceWith('<svg id="'+ element_id +'" class="scoreBar" width="'+ svgWidth +'" height="'+ (svgHeight - heightOffset) +'"></svg>');
        $(elementSelector).css({'width': svgWidth + 'px', 'height': (svgHeight-heightOffset) + 'px'});
        var anglePercentage = d3.scale.linear().domain([0, 100]).range([0, 2 * Math.PI]);
        var fullAnglePercentage = 100;
        var color = d3.scale.ordinal().range(["#ACACAC", "#EAEAEA", "#123123", "#DDEEAA", "#BACBAC"]);

        data = [[50, 90, 1],
                [50, 30, 2],
                [30, 10, 3],
                [10, -1, 4],
                [-1, -10, 5]]

        var vis = d3.select(elementSelector);
        var arc = d3.svg.arc()
                    .innerRadius(svgInnerRadius)
                    .outerRadius(svgOuterRadius)
                    .startAngle(function(d){return anglePercentage(d[0]);})
                    .endAngle(function(d){return anglePercentage(d[1]);});


        vis.selectAll("path")
           .data(data)
           .enter()
           .append("path")
           .attr("d", arc)
           .style("fill", function(d){return color(d[2]);})
           .attr("transform", "translate(" + svgWidth / 2 + ", " + svgHeight / 2 + ")");

提前致谢。

【问题讨论】：

您的小提琴似乎工作得很好，即使删除了 css。不知道你还期待什么。应用您问题中的尺寸时是否停止工作？
您不想创建方形饼图。您想回家，重新思考如何最好地可视化您的数据。
关于饼图的一点是，着色的区域与图表中的值成正比。对于方形图表，情况并非如此，角落的面积将大于边的中点。

标签： javascript css d3.js svg charts

【解决方案1】：

您可以使用剪辑路径来实现此目的。 What is a clip path?

为 SVG 添加剪辑路径的定义

var svg1 = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

//making a clip square as per your requirement.

svg1.append("defs").append("svg:clipPath")
        .attr("id", "clip")
        .append("svg:rect")
        .attr("id", "clip-rect")
        .attr("x", -120)
        .attr("y", -100)
        .attr("width", radius)
        .attr("height", radius);

制作普通的 d3 饼图，如下所示：

var g = svg.selectAll(".arc")
    .data(pie(data))
    .enter().append("g")
    .attr("class", "arc");

g.append("path")
    .attr("d", arc)
    .style("fill", function (d) {
    return color(d.data.age);
});

向主组添加这样的剪辑：

var svg = svg1.append("g").attr("clip-path", "url(#clip)")
    .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

完整的工作代码here。

【讨论】：