d3: При желании добавьте дочерние элементы на основе содержимого узла в силовом макете.

Используя макет force в d3, я могу с радостью добавить узлы, например, группу SVG из круга и некоторый текст:

var node = vis.selectAll(".node")
    .data(nodes)
    .enter().append("svg:g")
    .attr("class", "node");
node.append("svg:circle")
    .attr("r", 5);
node.append("svg:text")
    .text(function(d) { return d.nodetext });

Однако я хотел бы необязательно добавить в группу еще один элемент, зависящий от данных узла: поэтому, если данные для этого узла содержат атрибут «изображение», я хотел бы добавить новый дочерний элемент. -элемент (svg:изображение). Легко добавить svg:image ко всем узлам (я просто делаю это так же, как я сделал круг и текст выше). Также легко динамически изменить атрибут элемента, который вы уже создали (используя функцию в качестве значения атрибута, как text выше). Я не знаю, как добавить дочерний элемент svg:image, только если данные содержат атрибут image. Каков наилучший способ добиться этого?


javascript d3.js force-layout
person sil    schedule 08.10.2012    source источник

Ответы (1)


arrow_upward
11
arrow_downward

Попробуйте selection.filter:

node.filter(function(d) { return d.image; }).append("image")
    .attr("xlink:href", function(d) { return d.image; })
    .attr("width", 16)
    .attr("height", 16);
person mbostock    schedule 08.10.2012