Question

我试图在一个扇区上实现一个面积图，或者只是一个弯曲的面积图。

我能够使用d3 areaRadial()构建图表，但没有响应。

我面临的问题是，由于areaRadial是使用角度和半径工作的，因此很难根据父div容器的高度和宽度来缩放图表。

我通过分别以宽度和高度的比率更改角度和半径来进行变通。在某些屏幕上可以使用，但在其他屏幕上可以使用。

我想知道，使用d3 js和react js响应地实现这种图形的正确方法是什么？

我尝试过的最低版本： codepen

var data = [10,90,50,40,75];

var container = d3.select("#graph");

//Basic configuration
var cfg={
  baseRadius:400,
  curveAngle:25,
  graphHeight:200
}

var angleSlice = (cfg.curveAngle*2)/data.length;

var rScale = d3
  .scaleLinear()
  .range([0, cfg.graphHeight])
  .domain([0, 100]);

var PI = Math.PI;
var containerWidth = container.node().getBoundingClientRect().width;
var containerHeight = container.node().getBoundingClientRect().height;

var margin = {top:10,right:10,bottom:10,left:10};

var width = containerWidth - margin.left-margin.right;
var height = containerHeight - margin.top - margin.bottom;


var svg =container.append("svg")
   .attr("height",containerHeight-margin.top)
   .attr("width",containerWidth-margin.left);

var g = svg.append("g")
   .attr("transform","translate("+margin.left+","+margin.top+")");

var area = d3
   .areaRadial()
   .curve(d3.curveCardinal.tension(0.5))
   .angle(function(d, i) {
    return (-cfg.curveAngle + angleSlice * i) * (PI / 180);
   })
  .innerRadius(function(d, i) {
    return cfg.baseRadius;
  })
  .outerRadius(function(d, i) {
    return cfg.baseRadius + rScale(d);
  });

g.append("path")
  .attr("transform","translate("+(width/2)+","+ 
  (cfg.baseRadius+cfg.graphHeight)+")")
   .attr("d",area(data))

此示例的问题在于，由于baseRadius，graphHeight和curveAngle是硬编码的，因此很难做出响应。

扇区中的响应d3面积图

0 个答案: