Question

我在Angular 6项目上使用c3 js图表libray。有人可以为我建议一个适当的解决方案吗？ incomplete types proposal

Answer 1

您可以使用此

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中是否可以调用另一个函数，但是如果没有，只需创建一个即可

Answer 2

对不起，我不知道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

   })
 })

现在，您可以将排名取舍。

查看您的img

对于四舍五入来说，我不知道如何绘制，反转图表或其他内容。无论如何，您没有在虚拟代码中包括它，所以我没有做到

注意：将其调整为正常大小时，可能必须将其添加到该函数然后在图表变化时调用它

如何对堆积的条形图的上下角进行圆角处理

2 个答案: