Question

我正在从json文件中读取Arc信息并使用d3将其可视化。实际上我使用d3.layout来分组数据。所以我必须阅读这个文件，其中tag是我们的svg标记path而value是路径的d值，问题是d读取后返回值 0 。我如何阅读value？我应该以不同方式组织我的json文件吗？这是我的代码：

json文件：

      {"id": "svgContent","children": [
         {"id": "circle1","tag": "path",
         "value": "M0,160A160,160 0 1,1 0,-160A160,160 0 1,1 0,160M0,100A100,100 0 1,0 0,-100A100,100 0 1,0 0,100Z",
    "children": [
        { "id": "point", "cx": "-67.59530401363443", "cy": "-93.03695435311894" },
        { "id": "point", "cx": "-109.37149937394265", "cy": "35.53695435311897" },
        { "id": "point", "cx": "1.4083438190194563e-14", "cy": "115" }
   ]

},
        {"id": "circle2","tag": "path","value": "M0,260A260,260 0 1,1 0,-260A260,260 0 1,1 0,260M0,200A200,200 0 1,0 0,-200A200,200 0 1,0 0,200Z",
    "children": [                
        { "id": "point", "cx": "-126.37382924288177", "cy": "-173.93865379061367" },
        { "id": "point", "cx": "-204.477151003458", "cy": "66.43865379061373" },
        { "id": "point", "cx": "2.6329906181668095e-14", "cy": "215" }

    ]

}

 ]}

这是我的源代码：

  var w = 1200, h = 780;
  var svgContainer = d3.select("#body").append("svg")
           .attr("width", w).attr("height", h).attr("id", "svgContent");
     var pack = d3.layout.partition();
   d3.json("/data.json", function(error, root) {

    if (error) return console.error(error);
    var nodes = pack.nodes(root);  
    svgContainer.selectAll("pack").data(nodes).enter().append("svg")
   .attr("id", function (d) { return d.id; }).append("path")
   .attr("d", function (d) {

    console.log(d.value);

    return d.value; })
   .attr("transform", "translate(600,0)");

   });

当我检查控制台时，我预期"M0,260A260,260 0 1,1 0,-260A260,260 0 1,1 0,260M0,200A200,200 0 1,0 0,-200A200,200 0 1,0 0,200Z"但它返回 0 ，我该如何处理？

Answer 1

首先，我不确定您的d3.select("#body")是否应该是d3.select("body")？或者你有一个标识为body的元素？

将value重置为0的问题是，d3.layout.partition()使用值字段。您可以将值字段重命名为path之类的其他内容，并使用

进行设置

.attr("d", function(d){
  return d.path;
})

您的代码的另一个问题是，您添加了几个svg元素。如果你真的只想阅读圆圈路径并显示它们，那么这段代码可以完成工作：

var w = 1200, 
    h = 780;
var svgContainer = d3.select("body")
  .append("svg")
    .attr("width", w)
    .attr("height", h)
    .attr("id", "svgContent");

d3.json("/data.json", function(error, root) {

  if (error) return console.error(error);
  svgContainer.selectAll("path")
      .data(root.children)
      .enter()
    .append("path")
      .attr("id", function (d) { return d.id; })
      .attr("d", function(d) { return d.value})
      .attr("transform", "translate(260,260)");
});

无需分区布局。只需创建路径元素并从json添加路径。如果你想要显示圆圈，最好将它们放在你的json中的pathelements之外，因为你不能在路径元素中添加svg圆圈。

无法从d3 json文件中读取路径d值？

1 个答案: