我花了一些时间解决这个问题,并决定将 d3plus 和 d3 结合在一起,而不是只使用 d3plus。也许没有一个优雅的解决方案,它可以更简单地解决,但对我来说它有效。
所以这里是完整的代码:
<!doctype html>
<meta charset="utf-8">
<script src="http://www.d3plus.org/js/d3.js"></script>
<script src="http://www.d3plus.org/js/d3plus.js"></script>
<style type="text/css">
#viz {
height: 600px;
}
#network-timeline {
height: 30px;
margin-bottom: 10px;
text-align: center;
}
.time-tick {
background-color: #6f6d6d;
outline: 0;
position: relative;
cursor: pointer;
vertical-align: middle;
color: #FFF;
letter-spacing: 0.5px;
height: 28px;
margin: 0 0 15px 5px;
padding: 0 0.8rem;
border-radius: 2px;
text-transform: uppercase;
border: none;
-webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.18), 0 4px 15px 0 rgba(0, 0, 0, 0.15);
}
.time-tick:hover {
background-color: #9e9e9e;
}
.time-tick-selected {
background-color: #9e9e9e;
}
</style>
<div class="network">
<div id="viz"></div>
<div id="network-timeline"></div>
</div>
<script>
var initial_data = [
{"name": "point1", "year": 1994, "x": 3, "y": 7},
{"name": "point2", "year": 1994, "x": 2, "y": 6},
{"name": "point3", "year": 1994, "x": 4, "y": 6},
{"name": "point4", "year": 1994, "x": 1, "y": 5.5},
{"name": "point5", "year": 1994, "x": 5, "y": 5.5},
{"name": "point6", "year": 1994, "x": 2, "y": 4},
{"name": "point7", "year": 1994, "x": 4, "y": 4},
{"name": "point8", "year": 1994, "x": 1, "y": 3},
{"name": "point9", "year": 1994, "x": 5, "y": 3},
{"name": "point10", "year": 1994, "x": 2, "y": 1.5},
{"name": "point11", "year": 1994, "x": 4, "y": 1.5},
{"name": "point1", "year": 1995, "x": 3, "y": 7},
{"name": "point2", "year": 1995, "x": 2, "y": 6},
{"name": "point3", "year": 1995, "x": 4, "y": 6},
{"name": "point4", "year": 1995, "x": 1, "y": 5.5},
{"name": "point5", "year": 1995, "x": 5, "y": 5.5},
{"name": "point6", "year": 1995, "x": 4, "y": 4.5},
{"name": "point7", "year": 1995, "x": 1, "y": 3.5},
{"name": "point8", "year": 1995, "x": 2, "y": 3.5},
{"name": "point9", "year": 1995, "x": 1.5, "y": 1},
{"name": "point10", "year": 1995, "x": 4, "y": 1.5},
{"name": "point11", "year": 1995, "x": 5, "y": 2},
]
var connections = []
var filterData = function(data, key) {
return data.filter(function(obj){
if (!obj.hasOwnProperty("year")) {
console.error("Check input data. Every object should contain 'year' property.")
}
return obj.year == key
});
}
var timeButtonClickHandler = function() {
selectNetwork(this);
selectTimeButton(this);
}
var selectNetwork = function(el) {
var slice = filterData(slices, el.value)[0].nodes;
drawNetwork(slice);
}
var drawNetwork = function(data) {
visualization.data(data)
.nodes(data)
.edges(connections)
.id("name")
.draw();
}
var selectTimeButton = function(el) {
var button = document.querySelector(".time-tick-selected")
if (button){
button.className = "time-tick"
}
el.className = "time-tick time-tick-selected"
}
var visualization = d3plus.viz()
.container("#viz")
.type("network");
// Create slices of nodes by key "year" according to timeline
var timeSteps = d3plus.util.uniques(initial_data, function(d){return d.year}).sort();
var slices = [];
timeSteps.forEach(function(step){
slices.push({
"year": step,
"nodes": filterData(initial_data, step)
});
});
// Create timeline buttons
d3.select("#network-timeline")
.selectAll("input")
.data(timeSteps)
.enter()
.append("input")
.attr("type","button")
.attr("class","time-tick")
.attr("value", function (d){return d})
.on("click", timeButtonClickHandler);
// Draw initial network
if (timeSteps.length > 0) {
var button = document.querySelector("input[value='" + timeSteps[0] + "']");
if (button){button.click()}
}
else {
console.error("Check input data. Every object should contain 'year' property.")
}
</script>
JSbin 示例