0

我已经使用 d3.js 库有一段时间了，我喜欢可视化，但我很难准确地实现我需要的东西。

我正在尝试做的事情：

  • 我构建了一个图形，其中心节点的样式与其他节点不同。可视化在中心有一个标签（一个 id=node0 的特殊节点），连接到该标签的是其他样式节点。

  • 当用户点击提交时，ajax 调用会刷新 javascript 信息并使用新节点重新启动模拟。

我已经按照我在这里看到的相同方式进行了设置：

在 D3js 力图中添加和删除节点

我的刷新功能如下所示：

 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 元素（HTML 元素包含 d.name 的那个）不会在 Chrome 中重新定位。它在 Firefox 中运行良好，但在 Chrome 中，所有这些 DIV 都显示为 0,0。请注意，这些节点的第一个 DIV（具有 img 标签）以及附加到节点的所有图像都显示良好并正确重新定位。这只是第二个 DIV，它没有与关联的节点重新定位。

  • 我无法让 node0 的标签文本正确更新/更改。当我在（使用 d.query）中传递新文本时，该文本会覆盖旧文本，以便两者都显示出来。我想我需要先删除与 node0 关联的“文本”元素，但我不知道该怎么做。

  • 一般来说，我不确定我是否以正确的方式使用这个库。这里的困难源于这样一个事实，即我在节点上附加了很多内容，并且我有一个特殊的中央节点，其行为与其他节点不同。因此，任何有关如何更好地做到这一点的指示将不胜感激。

谢谢

4

1 回答 1

0

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

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

代替

n.append("text")
.attr("text-anchor", "middle")
.text(querytext);
于 2013-09-20T11:29:35.273 回答