javascript - 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()在616. distrocharts.js从那里我无法弄清楚如何解决它。任何建议将不胜感激。

Answer 1

这与clamp小提琴的选择有关。它应该设置为-1。

Answer 2

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