d3.js创建饼图但方形

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

所以，我想，可能是我创建饼图，并添加饼图之间的广场和擦除外面广场上的部分。但是，它还没有解决。

其次，我想，我可以用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 + ")");

在此先感谢。

来源

2015-10-11 Chaitanya Wadekar

你的小提琴似乎工作得很好，即使删除了CSS。不知道你期望什么。是否在应用问题中的维度时停止工作？ – spenibus

你不想创建一个方形的饼图。你想回家，并重新思考如何最好地形象化你的数据。 – mgold

有关饼图的事情是，着色区域与图表中的值成比例。用方形图表不是这样，角落的面积要大于边的中点。 –

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

为SVG添加clippath

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

的DEFS让您的正常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。

来源

2015-10-12 08:27:23 Cyril

d3.js创建饼图但方形

回答

相关问题