我有一个使用Bootstrap 3和Typeahead的应用程序.出于某种原因,只要我添加Typeahead.js,样式就会被错误格式化,你可以看到这个JSFiddle.以下HTML看起来很棒:
<div class="container" style="padding:3rem;">
<form class="form-horizontal">
<div class="form-group">
<div class="input-group">
<input type="search" class="form-control" id="myQuery">
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span id="searchIndexButton">Item 1</span> <span class="caret"></span></button>
<ul class="dropdown-menu dropdown-menu-right">
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</div>
</div>
</form>
</div>
一旦我用Typeahead初始化它,如下所示,它看起来很糟糕.
$(function() {
var data = [
{ id:1, name:'Tiger' },
{ id:2, name:'Bear' }
];
var bh = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.whitespace,
queryTokenizer: Bloodhound.tokenizers.whitespace,
local: data
});
$('#myQuery').typeahead(null, {
minLength: 1, …我正在试验这个 d3.js的例子(完整地粘贴在下面)来绘制一个基于JSON树结构的树.
此代码绘制了一个漂亮的树,但它不会以任何顺序垂直排序兄弟节点.数据恰好已经在底层JSON对象中排序.
我想知道如果底层数据尚未排序,我可以如何以字母顺序垂直排序这些节点(顶部为A,底部为Z,理想情况下不区分大小写).我需要在下面的代码中更改什么？
开始编辑:
我想这样做而不修改底层的JSON对象.我试过的一件事是在线tree.sort(d3.ascending);后添加d3.layout.tree().但那没有任何效果.我不知道为什么.
结束编辑
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.node {
cursor: pointer;
}
.node circle {
fill: #fff;
stroke: steelblue;
stroke-width: 1.5px;
}
.node text {
font: 10px sans-serif;
}
.link {
fill: none;
stroke: #ccc;
stroke-width: 1.5px;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 20, right: 120, bottom: 20, left: 120},
width = 960 - margin.right - margin.left,
height = 800 - margin.top - margin.bottom; …