Question

我正在使用distrochart小提琴图：

https://gist.github.com/asielen/92929960988a8935d907e39e60ea8417

在React应用中，我将情节嵌入到Modal窗口中，在Modal.Body中，我有：

       <Modal.Body>
         <ViolinPlot selectedDatasets={this.state.selectedDatasets} geneName = {this.state.currNodeData.name}/>
       </Modal.Body>

ViolinPlot是我创建的Component，我在其中容纳了distrochart中的代码。当我将鼠标悬停在条形图上时，工具提示的位置不正确。我在distrochart.js中设置了一个断点，并且d3.event.pageX和d3.event.pageY只是错误地确定了坐标（脚本的第374行）：

             chart.objs.tooltip
                .style("display", null)
                .style("left", (d3.event.pageX) + "px")
                .style("top", (d3.event.pageY - 28) + "px");

如何固定坐标，以便在正确的位置显示工具提示？我可以手动从坐标中添加/减去必要的数字，但这似乎不太正确。

更新

我尝试使用此处介绍的方法：

D3 (with Bootstrap grid layout) - tooltip placement is off

但是我在确定我的情况下应该navTopVr1和chartdiv1方面遇到困难：

.style("left", (d3.event.pageX- 
document.getElementById('navTopVr1').offsetLeft+2) + "px")         
.style("top", (d3.event.pageY- 
document.getElementById('navTopVr1').offsetTop- 
document.getElementById('chartdiv1').offsetTop-28) + "px");

我尝试使用主图表id的{{1}}和div的{{1}}，但是肯定不能为{{1}提供正确的坐标}轴，也许可以使用div轴。

D3在React的模式窗口中错误地确定了坐标

0 个答案: