Question

我正在尝试使用D3访问下面json对象中的vis元素（参见屏幕截图），但我无法这样做。我可以使用类似于以下内容的代码访问键和值元素而没有任何问题：

console.log(d.key);

但这不起作用（我得到一个未定义的错误）：

console.log(d.vis);

任何想法我做错了什么？谢谢！

json obj http://i42.tinypic.com/21cgtaa.png

以下是一些代码段：

var nested = d3.nest().key(function(d) { return d._id.stream; })
  .entries(data.result);

var stream = main.selectAll(".stream")
  .data(nested)
  .enter().append("g")
  .attr("class", "stream");    

  stream.append("rect")
  .attr("height",10)
  .attr("width", 25)
  .attr("x",width-215)
  .attr("y", function(d,i) { return height-400 + (i*40); })
  .attr("stroke", function(d) { return color(d.key);})
  .attr("fill",function(d) {
      if(d.vis=="1") {
        return color(d.key);
      }
      else {
        return "white";
      }
   })
   .on("click", function(d) {
     console.log(d);
     console.log(d.vis);  // undefined
     if(d.vis=="1") {
        d.vis="0";
      }
      else{
        d.vis="1";
      }
   });

Answer 1

看起来发生了以下情况。执行单击处理程序功能。在里面，你正在记录d.vis，这是未定义的。紧接着之后的代码检查d.vis是否具有特定值，否则将其设置为“1”。这个“其他”包括未定义的案例。

因此，在执行处理程序后，为d.vis设置了d。您正在使用的调试器显示变量的值，在console.log()语句之后被修改。也就是说，在您打印d时，d.vis确实未定义。但是你之后会立即设置它，这就是你在控制台中得到的结果。

日志在打印时不会显示变量状态的快照，但会显示当前版本，在这种情况下，该版本已设置d.vis。

Answer 2

注意数据结构：看到fetchData.js，除了priceList和name之外，应该有vis元素来确定是否显示曲线。

//The main data array of the graph
//format:
//data2 (List of fundObj)
//   fundObj (Name, priceList)
//      Name
//      vis
//      priceList (List of priceItem)
//         priceItem (date, price)

所以，要清楚代码中的“d”是什么，这一切都取决于你传递给调用的数据：

var fund = focus.selectAll(".fund")
        .data(data2)
        .enter().append("g")
        .attr("class", "fund");

这里data2是原始数据，你可以使用其他结构，但需要在“d”的地方修改一些代码......

D3尝试访问json对象中的vis元素

2 个答案: