Question

我正在研究一个JavaScript图形实现，可以将其用作快速原型制作的基础。

运行代码时，我不断收到此错误：Unexpected value translate(NaN,NaN) parsing transform attribute.

这是我添加节点complete CodePen example is available here的地方。

var iNode = {'id':4, 'x':111, 'y':222};
wGraph.addNode(iNode);

// ...

function addNode (iNode)
{
  mNodesData.push(iNode);

  wNewNode = mSvg
    .select(".nodes")
    .selectAll(".node")
    .data(mNodesData).enter()
    .append("g")
      .attr("class", "node")
    .call(d3.drag()
      .on("start", graphDragstarted)
      .on("drag", graphDragged)
      .on("end", graphDragended))
    .append("g");

 // Merge new node
  mNodesRef = wNewNode.merge(mNodesRef);

  wNewNode.append("circle")
    .attr("r", mNodeRadius);
};

我只是进入Javascript（来自C ++），而定义类型的方式仍然让我感到困惑。当我为console.log(iNode) var iNode = {'id':4, 'x':111, 'y':222}; {}时，我得到了这种对象：

{…}
    id: 4
    vx: NaN
    vy: NaN
    x: NaN
    y: NaN

...但是如果我要删除整个图形，它会打印到：

{…}
    id: 4
    x: 111
    y: 222

...所以我的猜测是我的Object是根据它在Graph（）“ class ”中的使用方式键入的，但是我不知道该如何正确地对其进行整形

Answer 1

经过检查和记录后，发现mCenterX和mCenterY是NaN。

结果是d3.forceX和d3.forceY将节点的位置更新为NaN。

@VincentDM发现px和width属性中的height在解析属性时出现问题。以下也可以解决问题

mSvgWidth  = iTargetElement.attr("width").replace("px","");
mSvgHeight = iTargetElement.attr("height").replace("px","");

这将导致svg和rect都获得width和height，而没有单位。

最好给第一个rect一个类，以防其他rects被添加到svg

mSvg.append("rect")
  .attr("width", mSvgWidth)
  .attr("height", mSvgHeight)
  .attr("class", "background");

并调整CSS

rect.background {
  fill: none;
  stroke: #888;
  stroke-width: 2px;
  pointer-events: all;
}

将节点添加到列表时，simulation没有再次启动。将调用添加到修复了

的函数

function addNode (iNode)
{
    // ...
    updateSimulation();
    // ...
}

由于初始列表为空，因此可以简化链接和节点g的构造

  // Create links structure
  mSvg.append("g")
    .attr("class", "links");

  mLinksRef = mSvg.select(".links").selectAll(".link");

  // Create nodes structure
  mSvg.append("g")
    .attr("class", "nodes")
    .selectAll(".node");

  mNodesRef = mSvg.select(".nodes").selectAll(".node");

如果删除添加到g的{{1}}，则转换将在g.node上进行，结果属于此节点的所有内容都将被转换。

将g.node的阻力设置为0.1会导致仿真花费很长时间才能完成。似乎还有一个替代止损，但要花很长时间。

alphaTarget

D3v4图类，添加节点时遇到麻烦

1 个答案: