d3fc/d3.js如何堆叠多个不连续点

Question

我一直在尝试使用d3fc/d3.js创建具有多个中断的比例。例如，我目前正在尝试创建一个从0到100的比例，其中包含一个从10到20和50到80的间隔：

 var scale = fc.scaleDiscontinuous(d3.scaleLinear());
 breaks = [[10,20],[50,80]];

 for (break_index in breaks){

    b = breaks[break_index];
    scale.discontinuityProvider(fc.discontinuityRange(b));

 }


scale.domain([ 100, 0])
     .range([content_width,0]);

然而，这只返回一个从50到80的间隔，这意味着第一个间隔(10-20)将被覆盖。有没有办法在同一尺度上有多个中断？

任何帮助都将不胜感激。

Answer 1

您的代码将遍历breaks数组，并在每次迭代中设置discontinuityProvider属性。每次设置此属性时，都会覆盖先前的值！

解决方案是直接向中断提供者提供多个“中断”：

const scale = fc.scaleDiscontinuous(d3.scaleLinear());
  .discontinuityProvider(fc.discontinuityRange([10,20], [50,80]))
  .domain([ 100, 0])
  .range([content_width,0]);