代码之家 › 专栏 › 技术社区 › VincentDM

D3v4图形类,添加节点时出错

graph d3.js class javascript

VincentDM · 技术社区 · 6 年前

当我运行代码时,经常会出现以下错误: 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 是根据它在图形中的用法键入的。“ “但我不知道如何正确塑造它。

1 回复 | 直到 6 年前

rioV8 6 年前

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

结果是 d3.forceX 和 d3.forceY 南 .

@VincentDM发现 px 在 width 和 height 下面的内容也可以解决这个问题

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

svg 和 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();
    // ...
}

因为初始列表是空的,所以链接和节点的构造

s可以简化

  // 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.node

转换将设置在

其结果是属于此节点的所有内容都被转换。

设置


   alphaTarget

对于dragend结果,0.1表示模拟需要很长时间才能完成。似乎有一个替代站,但它需要很长的路。

  function graphDragended (d) 
  {
    if (!d3.event.active) mSimulation.alphaTarget(0);
    d.fx = null;
    d.fy = null;
  };