javascript - 使用 D3js 绘制 JSON 到 SVG 平面图

Question

所以这将是我第一次无法通过搜索找到问题的答案..

我对 D3 和 Javascript 总体来说还很陌生，我想要实现的是在浏览器中从 CAD 工具 (Autodesk Revit) 导出的一些曲线的可视化。我已经将几何图形导出为json，数据结构可以在这里查看:http://codepen.io/MadsHolten/pen/RaJGOp.js

正如你所看到的，我有直线和弧线。现在我只是想让线路正常工作，但还没有成功。

我的方法是循环遍历数据并生成以下格式的新 Javascript 对象:

[ [{x: startX, y: startY},{x: endX, y: endY}],[{...},{...}] ]

我以为我已经成功了，但我收到以下错误:“错误:属性 d="MNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaNLNaN、NaN"的值无效

坐标的数据类型可能有问题(但我不明白为什么)。

var w = 1000,
h = 600;

var svg = d3.select("#d3").append("svg")
 .attr("width", w)
 .attr("height", h);

//accessor function used by the path generator to produce path data (this works for lines - find another one for archs later)
var lineFunction = d3.svg.line()
 .x(function(d) { return d.x; })
 .y(function(d) { return d.y; })
 .interpolate("linear");

d3.json("http://codepen.io/MadsHolten/pen/RaJGOp.js",function(error, plan) { if (error) return console.error(error);

  //Loop through lines of room 0 (for test purpose)
  var lineArray = [];
  for(i=0;i<plan[0][0].length;i++){
  var pointArray = [];

  //Start point
  var x = (plan[0][0][i].start[0]).toFixed(0);
  var y = (plan[0][0][i].start[1]).toFixed(0);
  var startPoint = {x: x, y: y};
  pointArray.push(startPoint);

  //End point
  var x = (plan[0][0][i].end[0]).toFixed(0);
  var y = (plan[0][0][i].end[1]).toFixed(0);
  var endPoint = {x: x, y: y};
  pointArray.push(endPoint);

  //Push line start and end point to lineArray
  lineArray.push(pointArray);
}

var testdata = JSON.stringify(lineArray);
d3.select("#console").html('testdata = '+testdata+';');

 svg.append("path")
  .attr("d", lineFunction(lineArray))
  .attr("stroke", "blue")
  .attr("stroke-width", 2)
  .attr("fill", "none");
});

在此处查看我的完整代码笔:http://codepen.io/MadsHolten/pen/mPLzOx?editors=1010

Answer 1

问题是 lineFunction 需要 [{x: #, y: #}, {x: #, y: #}] 形式的数据。您的代码为其提供了一个数组。

为了将数组分割成“可用”的部分，您必须使用 d3 enter 功能。

  svg.selectAll("path").data(lineArray)
    .enter().append("path")
    .attr("d", linefunction)
    .attr("stroke", "blue")
    .attr("stroke-width", 2)
    .attr("fill", "none");

此代码将:

• 获取所有路径
• 将数据与所有选定的路径相匹配
• Enter 对缺失的元素进行操作，即存在数据但未选择任何内容的位置
• 为进入的对象创建路径并设置属性
• 当您使用 .attr("d", linefunction) 时，它会自动使用绑定(bind)到对象的数据调用 lineFunction

如果您用此代码替换您的附加 block ，它将起作用。也就是说，不会显示任何内容，因为您的坐标位于 SVG 之外。