Я новичок в D3JS, мне нужно создать силовой макет с изображением или кругом для каждого узла. это означает, что узел изображения или узел круга добавляются динамически. Возможно ли это?, если есть примеры, пожалуйста, ответьте
d3js заставляет макет динамически добавлять изображение или круг для каждого узла
Ответы (2)
Хорошо, если вы просто хотите иметь изображение в середине круга, попробуйте следующее:
/* Create nodes */
var node = vis.selectAll("g.node")
.data(json.nodes) // get the data how you want
.enter().append("svg:g")
.call(node_drag);
/* append circle to node */
node.append("svg:circle")
.attr("cursor","pointer")
.style("fill","#c6dbef")
.attr("r", "10px"})
/* append image to node */
node.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -8)
.attr("y", -8)
.attr("width", 16)
.attr("height", 16);
Вы также можете добавить заголовок, текст... См. документацию из selection.append(name)
для получения дополнительной информации.
person
Christopher Chiche
schedule
14.10.2012
Спасибо, Крис Джеймс. возможен ли круг с текстом и круг с изображением?
- person user1159833; 15.10.2012
Да полностью, это просто складывается. Лучший способ увидеть, как это сделать, — просмотреть примеры графика силы на сайте www.d3js.org.
- person Christopher Chiche; 15.10.2012
Для динамического изображения вы можете сохранить локальное изображение, а используя имя изображения, вы можете использовать динамическое изображение из локального.
Для создания круга можно использовать:
var groups = node.enter().append("g")
.attr("class", "node")
.attr("id", function (d) {
return d.entityType;
})
.on('click', click)
groups.append("circle")
.attr("cursor", "pointer")
.style("fill", function(d) { return color(d.entityType); })
.style("fill", "#fff")
.style("stroke-width", "0")
.style("stroke", "#ddd")
.attr("r", 20);
Здесь d.entityType будет именем примера изображения: favicon.png
groups.append("image")
.attr("xlink:href",function (d) {
return "../assets/images/"+d.entityType+".png";
})
.attr("x", -14)
.attr("y", -15)
.attr("width", 30)
.attr("height", 30)
Если вы хотите добавить текст внутри круга, вы можете использовать:
groups.append("text")
.attr("dy", 18)
.style("font-size", "2.5px")
.style("text-anchor", "middle")
.style('fill','#000')
.attr("refX", 15)
.attr("refY", -1.5)
.text(function (d) {
return d.entityName;
});
person
Vanshaj Rai
schedule
09.10.2017