如何使VIS-線和VIS-盒左側

Question

我需要vis-line更大（如10px的）和vis-box留下10px的以及使vis-line和vis-box可以左對齊正確就像一個垂直線：

.vis-item.vis-line { 
    position: absolute; 
    border-width: 10px; 
    border-color: red; 
    }  
    .vis-item.vis-box { 
    border-width: 1; 
    text-align: left !important; 
    background-color: transparent !important; 
    border-left-width: 10px; 
    border-color: red; 
    } 

看到網址https://jsfiddle.net/gbdjbdhv/3/
但vis-line比vis-box左側5px的左側。我需要建議如何使vis-line和vis-box左側正確對齊。

Answer 1

vis.js時間軸動態設置箱子的位置。負責水平定位和重新定位箱子物品BoxItem.prototype.repositionX的方法不考慮您的預期用例。解決這個問題的最佳地點是在vis.js庫中。

但是，將每個框的left值設置爲其對應的vis-line的left值可能會作爲功能短期解決方案。這是假設每個盒子都有一條線，每條線都有一個盒子。所有項目都必須是箱子類型。此外，option.align不再需要 - 刪除align: 'left'。

function positionBoxes() { 

    var leftValues = []; 

    // Get the left value for each vis line 
    $('.vis-line').each(function() { 
    leftValues.push($(this).css('left')); 
    }); 

    // Set the box's line's left value on the box 
    $('.vis-box').each(function(index) { 
    $(this).css('left', leftValues[index]); 
    }); 
} 

// Call positionBoxes anytime the timeline 
// repositioned the boxes (window resize, zoom) 
timeline.on('changed', positionBoxes) 

小提琴 - https://jsfiddle.net/dba4ketr/3/

Answer 2

有在使用左/右對齊時正確定位線的一個錯誤：它不與線寬度推算。將在第一個下一版的vis.js中得到修復。

請參閱https://github.com/almende/vis/pull/1695