Question

我现在一直在使用d3.js库，我喜欢可视化，但我很难实现我所需要的。

我正在尝试做什么：

我构建了一个图形，其中心节点的样式与其他节点不同。可视化在中心有一个标签（id = node0的特殊节点），并且与该标签连接的是其他样式节点。
当用户点击提交时，ajax调用会刷新javascript信息并使用新节点重新启动模拟。

我的设置与我在这里看到的方式相同：

Adding and Removing Nodes in D3js Force Graph

我的刷新功能如下所示：

 function restart() 
 {

   for ( ii = 0; ii < nodes.length; ii++ ) {
   var n = nodes[ii];

   if (n.id == 0)
   {
      n.fixed = true;
      n.x = w/2;
      n.y = h/2;
      continue;
   }

   mult1 = [ -1.0, -1.0, 1.0, 1.0 ];
   mult2 = [ 1.0, -1.0, -1.0, 1.0 ];
   n.x = w/2 + ii*5 * mult1[ii%4];
   n.y = h/2 + ii*5 * mult2[ii%4];
   }


 var node = svg.selectAll("g.node")
  .data(nodes, function(d) { return d.id;});

 var nodeEnter = node.enter().append("g")
  .attr("id", function(d) { return "node" + d.id })
  .attr("class", "node")
  .call(force.drag);

 node.exit().remove();

 node.each( function(d)  {

    if (d.id != 0)
    {
       n = svg.select("#node" + d.id);
       frame = n.append("svg:foreignObject")
         .attr("x", -1.0 * platewidth/2)
         .attr("y", -1.0 * plateheight/2)
         .attr("width", platewidth)
         .attr("height", plateheight)
         .on("click", showdetail)
         .on("tap", showdetail);
       frame.append("xhtml:div")
         .attr("class", "top-plate")
         .html(function(d) { return "<img src='/img/" + d.img + "'>" } );
       frame.append("xhtml:div")
         .attr("class", "btm-plate")
         .html( function (d) { return d.name });


       n.append("image")
         .attr("xlink:href", function(d) { return d.ownerimg })
         .attr("x", platewidth/2 - 35)
         .attr("y", plateheight/2 - 15)
         .attr("width", 30)
         .attr("height", 30)
         .on("click", showdetail)
         .on("tap", showdetail);

      n.append("image")
         .attr("xlink:href", function(d) { return d.houseimg })
         .attr("x", platewidth/2 - 70)
         .attr("y", plateheight/2 - 15)
         .attr("width", 30)
         .attr("height", 30)
         .on("click", showdetail)
         .on("tap", showdetail);
    }
    else
    {
        querytext = d.query;
        n = svg.select("#node" + d.id);
        n.append("text")
          .attr("text-anchor", "middle")
          .text(querytext);    

        n.attr("transform", function(d) {
           return "translate(" + d.x + "," + d.y + ")";
        });    
    }

  });

    force.start();

 }

我遇到的问题：

节点的第二个DIV元素（包含d.name的HTML元素的元素）不会在Chrome中重新定位。它在Firefox中运行良好，但在Chrome中，所有这些DIV都显示为0,0。请注意，这些节点的第一个DIV（具有img标签）以及连接到节点的所有图像都显示正常并且正确地重新定位。这只是第二个DIV，它没有与相关节点重新定位。
我无法正确更新/更改node0的标签文本。当我传入新文本（使用d.query）时，文本会覆盖旧文本，以便显示出来。我想我需要首先删除与node0关联的“text”元素，但我不知道该怎么做。
一般来说，我不确定我是否正确使用这个库。这里的困难源于这样一个事实，即我将很多东西附加到节点上，并且我有一个特殊的中心节点，其行为与其他节点不同。因此，任何关于如何做得更好的指示都将不胜感激。

由于

Answer 1

我认为您的第二个问题可以通过使用

来解决

n.selectAll("text")
.attr("text-anchor", "middle")
.text(querytext);

而不是

n.append("text")
.attr("text-anchor", "middle")
.text(querytext);

d3js中的刷新图

1 个答案: