javascript - d3.js 创建饼图但呈方形

Question

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

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

其次，我想，我可以用 CSS 做到这一点。我这样做了。但是，我对这个解决方案不满意。这太hacky了。谁能帮我解决好问题。

This is my jsfiddle link.

//// 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 + ")");

提前致谢。

Answer 1

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

为 SVG 添加 clippath 的 defs

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 .