d3js заставляет макет динамически добавлять изображение или круг для каждого узла

Я новичок в D3JS, мне нужно создать силовой макет с изображением или кругом для каждого узла. это означает, что узел изображения или узел круга добавляются динамически. Возможно ли это?, если есть примеры, пожалуйста, ответьте


person user1159833    schedule 14.10.2012    source источник


Ответы (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
comment
Спасибо, Крис Джеймс. возможен ли круг с текстом и круг с изображением? - person user1159833; 15.10.2012
comment
Да полностью, это просто складывается. Лучший способ увидеть, как это сделать, — просмотреть примеры графика силы на сайте 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