小提琴图未在d3.js应用中正确显示

Question

我提供了从此处绘制小提琴图的代码：

http://bl.ocks.org/asielen/1a5e8d77ae8feb464167

在我的React应用中，除Violin plot和Bean plot看起来很不正确之外，其他所有功能都正常运行：

设置图表的代码：

plotSelected = (e) => {
  let id = e.target.id;
  ...
  ...
} else if (id === "violin-plot-unbound") {
  violinPlot.violinPlots.show({reset:true,clamp:0});
  violinPlot.boxPlots.show({reset:true,   
showWhiskers:false,showOutliers:false,boxWidth:10,lineWidth:15,colors: 
 ['#555']});
  violinPlot.notchBoxes.hide();
  violinPlot.dataPlots.change({showPlot:false,showBeanLines:false});
} else if (id === "violin-plot-clamp") {
    violinPlot.violinPlots.show({reset:true,clamp:1});
    violinPlot.boxPlots.show({reset:true, 
 showWhiskers:false,showOutliers:false,boxWidth:10,lineWidth:15,colors:['#555']});
  violinPlot.notchBoxes.hide();
  violinPlot.dataPlots.change({showPlot:false,showBeanLines:false});
 ...
 ...
}

plotSelected()函数由render()方法中的按钮单击触发。

其他图表看起来很完美，所以不知何故，只有这两个图表弄得一团糟，所以我猜它需要固定在distrocharts.js内，而不是我的React代码中。我认为是violinPlots.show({reset:true,clamp:0})函数指向violinPlots.change，在这里我们可以在violinPlots.prepareViolin()的{​​{1}}行看到616。从那里，我很难弄清楚如何解决它。任何建议将不胜感激。

Answer 1

我为distrochart.js复制了旧代码（来自prepareViolin()的旧版本），它开始工作。因此，只要需要有效的小提琴图，就不应该遵循页面上的“请使用最新版本”的建议。

Answer 2

这与小提琴的clamp选项有关。应该将其设置为-1。