如何舍入堆积条形图的顶部和底部角？

Question

我在 Angular 6 项目中使用 c3 js 图表库。谁能建议我一个合适的解决方案？

Answer 1

对不起，我不知道 C3 库是如何工作的，但现在我已经广为人知了。

C3 使用路径构建矩形图，所以没有必要使用 d3.selectAll( 'rect')

您必须使用以下方式编辑它：d3.selectAll('path')

按照这个来理解或者只是复制粘贴这个代码到你的初始化 c3 图表代码下面

随便你的dummy sample code。 d3 库在我这边不起作用，我改变了 import d3 from d3到

import * as d3 from 'd3'; 

你用这个初始化c3图表

 chart.bindto = '#chart';

你的图表正在绘制

然后添加这个来做圆顶角，这只有在图表已经绘制阅读解释时才有效

 // Select all path on the svg
 d3.selectAll('path').each(function(){
   var x = chart.internal.x //To get xScale on c3
   var height = chart.internal.height // to get chart height on c3
   var data= d3.select(this).data()[0] // to get data on element path d3
   var y =  chart.internal.y // to get Yscale
   var path = d3.select(this).attr('d') // to get attribute d path
   var pathArray =  path.split('L')// to make custumisation
   var rx = 7 // just to set rounded x
   var ry = 7 // just to set rounded y


   // see this it for void any path you dont want to be rounded
   // i see yours first img make sure to change this
   if (data.x === undefined) return 
   if (data.id == 'data2') return

   // after you void any path you dont want to be rounded now its the time 
   d3.select(this).attr('d', function(d,i){
     // get coordinate to be manupulated
     var bwidth1 = pathArray[0].split(',')
     var bwidth2 = pathArray[1].split(',')
     var bwidth3 = pathArray[2].split(',')

     // manipulate coordinate so it can be rounded pretty
     pathArray[1] =bwidth2.map(function(d,i){
       if (i == 1){
         var a = (d*1)+ rx
       } else {
         var a = (d*1)
       }
       return a
     })

    pathArray[2] =bwidth3.map(function(d,i){
      if (i == 1){
         var a = (d*1)
       } else {
         var a = (d*1)-rx
       }
       return a
     })

     // this code make rounded (on $a)
     var a = `
     ${pathArray[0]}


     L${pathArray[1]}

     a${rx},${ry} 0 0 1 ${rx},${-ry}
    L${pathArray[2]}

     a${-rx},${ry} 0 0 1 ${rx},${ry}
     L${pathArray[3]}
     `
     return a

   })
 })

现在您可以制作顶部圆角了。

看看你的图片

对于底部圆形，我不知道你是如何绘制它的，你将图表倒置或什么。 无论如何，您没有将其包含在您的虚拟代码中，所以我没有做到

注意：当它恢复正常大小时，也许您必须将其添加到 每当您的图表发生变化时，该函数就会调用它

Answer 2

你可以用这个，

d3.selectAll("rect")       // select all rectangle
    .attr("rx", 10)         // set the x corner curve radius
    .attr("ry", 10);        // set the y corner curve radius

我不知道在c3中是否可以调用另一个函数，但是如果没有，就做一个