前端JavaScript 踩坑记录 bootstrap d3.js等

Javascript 获取svg元素（text、tect等）长度宽度位置为0或undefined

描述： 使用jQuery的.height()、getBoundingClientRect()，以及d3.js的selection.node().getBBox()均失效。
原因： 经过在不同代码段内插入以上方法排查，发现罪魁祸首是父元素的display属性设为了none，之后运行函数，即使最后display改了回来，以上方法也不能获取正确的方位、大小信息。
解决： 移动代码，获取长宽信息时保证display不是none。

Bootstrap-select 样式、使用等失效

原因及解决： 自己用的bootstrap版本为3.x，更换为4.x后得到了解决。不要忘记引用6个文件：jQuery的js、bootstrap的js和css、bootstrap-select的js和css，以及在bootstrap4中还需要引用的popper.js。
为了检查是不是版本的原因，还是某个文件的原因，可以试试引用下面的cdn文件：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha256-YLGeXaapI0/5IgZopewRJcFXomhRMlYYjugPLSyNjTY=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/css/bootstrap-select.min.css">


<select class="selectpicker" multiple>
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Relish</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha256-CjSoeELFOcH0/uxWu6mC/Vlrc1AARqbm/jiiImDGV3s=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.9/dist/js/bootstrap-select.min.js"></script>

Bootstrap-select 无法设置默认选择的选项

描述： 使用jQuery的$("#tableName option[text=节点用户]").attr(“selected”, “selected”);或.attr(“selected”, true);等均没法设置默认选择。
原因及解决： bootstrap-select 中文文档有说明：

.selectpicker('val')

您可以通过调用元素上的val方法来设置所选值。

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

这与直接在select元素上调用val（）不同。 如果直接在元素上调用val（），则bootstrap-select ui将不会刷新（因为更改事件仅从用户交互中触发）。 您必须自己调用ui refresh方法。

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');

// 这相当于上述内容
$('.selectpicker').selectpicker('val', 'Mustard');

直接使用自带函数$(’.selectpicker’).selectpicker(‘val’, ‘xxx’);即可。