Первый вопрос о переполнении стека, так что несите меня! Я новичок в d3.js, но постоянно удивляюсь тому, что другие могут с этим справиться... и почти так же поразительно, как мало успеваемости я смог сделать с ним сам! Понятно, что я не собираюсь что-то делать, поэтому я надеюсь, что добрые души здесь могут показать мне свет.
Мое намерение состоит в том, чтобы сделать многократно используемую функцию javascript, которая просто делает следующее:
- Создает пустой заданный по силе график в указанном элементе DOM
- Позволяет добавлять и удалять помеченные узлы, несущие изображение, на этот граф, указывая соединения между ними.
Я взял http://bl.ocks.org/950642 в качестве отправной точки, так как это, по сути, тип макета, который я хочу создать:
Вот как выглядит мой код:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="underscore-min.js"></script>
<script type="text/javascript" src="d3.v2.min.js"></script>
<style type="text/css">
.link { stroke: #ccc; }
.nodetext { pointer-events: none; font: 10px sans-serif; }
body { width:100%; height:100%; margin:none; padding:none; }
#graph { width:500px;height:500px; border:3px solid black;border-radius:12px; margin:auto; }
</style>
</head>
<body>
<div id="graph"></div>
</body>
<script type="text/javascript">
function myGraph(el) {
// Initialise the graph object
var graph = this.graph = {
"nodes":[{"name":"Cause"},{"name":"Effect"}],
"links":[{"source":0,"target":1}]
};
// Add and remove elements on the graph object
this.addNode = function (name) {
graph["nodes"].push({"name":name});
update();
}
this.removeNode = function (name) {
graph["nodes"] = _.filter(graph["nodes"], function(node) {return (node["name"] != name)});
graph["links"] = _.filter(graph["links"], function(link) {return ((link["source"]["name"] != name)&&(link["target"]["name"] != name))});
update();
}
var findNode = function (name) {
for (var i in graph["nodes"]) if (graph["nodes"][i]["name"] === name) return graph["nodes"][i];
}
this.addLink = function (source, target) {
graph["links"].push({"source":findNode(source),"target":findNode(target)});
update();
}
// set up the D3 visualisation in the specified element
var w = $(el).innerWidth(),
h = $(el).innerHeight();
var vis = d3.select(el).append("svg:svg")
.attr("width", w)
.attr("height", h);
var force = d3.layout.force()
.nodes(graph.nodes)
.links(graph.links)
.gravity(.05)
.distance(100)
.charge(-100)
.size([w, h]);
var update = function () {
var link = vis.selectAll("line.link")
.data(graph.links);
link.enter().insert("line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
link.exit().remove();
var node = vis.selectAll("g.node")
.data(graph.nodes);
node.enter().append("g")
.attr("class", "node")
.call(force.drag);
node.append("image")
.attr("class", "circle")
.attr("xlink:href", "https://d3nwyuy0nl342s.cloudfront.net/images/icons/public.png")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("width", "16px")
.attr("height", "16px");
node.append("text")
.attr("class", "nodetext")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) { return d.name });
node.exit().remove();
force.on("tick", function() {
link.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
});
// Restart the force layout.
force
.nodes(graph.nodes)
.links(graph.links)
.start();
}
// Make it all go
update();
}
graph = new myGraph("#graph");
// These are the sort of commands I want to be able to give the object.
graph.addNode("A");
graph.addNode("B");
graph.addLink("A", "B");
</script>
</html>
Каждый раз, когда я добавляю новый node, он повторно маркирует все существующие узлы; эти кучи друг на друга, и все начинает становиться уродливым. Я понимаю, почему это так: потому что, когда я вызываю функцию функции update() при добавлении нового node, он выполняет node.append(...) ко всему набору данных. Я не могу понять, как это сделать только для node, я добавляю... и я могу, по-видимому, использовать node.enter() только для создания одного нового элемента, так что это не работает для дополнительных элементов я необходимо связать с node. Как я могу это исправить?
Спасибо за любые рекомендации, которые вы можете дать по любой из этих проблем!
Отредактировано, потому что я быстро исправил источник нескольких других ошибок, о которых упоминалось ранее
