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

Question

我正在从 json 文件中读取 Arc 信息并使用 d3 将它们可视化。实际上，我正在使用 d3.layout 对数据进行分组。所以我必须阅读这个文件，其中 tag 是我们的 svg 标签，即 path 而 value 是 d path 的值，问题是 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")？或者你有一个 id 为 body 的元素吗？

将 value 重置为 0 的问题在于，d3.layout.partition() 使用了 value 字段。您可以将值字段重命名为 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 中的路径元素之外，因为你不能在路径元素内添加 svg 圆圈。