d3: 可选地在force layout中根据节点内容添加子元素

d3: Optionally add child elements based on node content in force layout


d3: 可选地在force layout中根据节点内容添加子元素 已获得1个解决方法 2020-08-18 18:07:05 javascript

使用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 });

但是,我想可选地将另一个元素添加到组中,取决于节点数据: 因此,如果此节点的数据包含 “image” 属性,我想添加一个新的子元素 (svg:image).很容易将svg: 图像添加到所有节点 (我只是这样做,因为我已经完成了上面的圆圈和文本).动态更改您已经创建的元素的属性也很容易 (通过将函数作为属性的值,如上面的 text 所示).仅当数据包含 image 属性时,我不知道如何添加 svg:image 子元素.实现这一目标的最佳方法是什么?


d3: 可选地在force layout中根据节点内容添加子元素 方法1

尝试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);

.htaccess .net .net-core 2d 3d 3d-printing ab-initio abp abstract-syntax-tree actions-on-google actionscript-3 active-directory activemq activemq-artemis acumatica adobe-xd aframe ag-grid agora.io air airflow ajax akka alert alexa algorithm alignment allure amadeus amazon-cloudformation