與json字符串d3.js樹不認識爲陣列

Question

我使用d3.js爲了顯示一棵樹。

的問題是下一個：

如果在JavaScript我做 var data1 = [ { "name" : "Level 2: A", "parent":"Top Level" }, ];

這項工作做得很好（我指的是視圖顯示我的樹）。但是，如果我在視圖中的JSON字符串： String dataTree = (String) ViewData["dataTree"];

，然後在使用Javascript我做的： var data = '@dataTree';

控制檯返回錯誤

Uncaught TypeError: data.reduce is not a function

而在我看到

源

var data = '[{"name":"root"]

（var with & quot）。

下面我複製我在視圖中使用，以表明該樹d3.js代碼：

var data = '@dataTree'; 

// *********** Convert flat data into a nice tree *************** 
// create a name: node map 
var dataMap = data.reduce(function(map, node) { 
    map[node.name] = node; 
    return map; 
}, {}); 

// create the tree array 
var treeData = []; 
data.forEach(function(node) { 
    // add to parent 
    var parent = dataMap[node.parent]; 
    if (parent) { 
     // create child array if it doesn't exist 
     (parent.children || (parent.children = [])) 
      // add node to child array 
      .push(node); 
    } else { 
     // parent is null or missing 
     treeData.push(node); 
    } 
}); 

// ************** Generate the tree diagram ***************** 
var margin = {top: 20, right: 120, bottom: 20, left: 120}, 
    width = 960 - margin.right - margin.left, 
    height = 500 - margin.top - margin.bottom; 

var i = 0; 

var tree = d3.layout.tree() 
    .size([height, width]); 

var diagonal = d3.svg.diagonal() 
    .projection(function(d) { return [d.y, d.x]; }); 

var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.right + margin.left) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 

root = treeData[0]; 

update(root); 

function update(source) { 

    // Compute the new tree layout. 
    var nodes = tree.nodes(root).reverse(), 
     links = tree.links(nodes); 

    // Normalize for fixed-depth. 
    nodes.forEach(function(d) { d.y = d.depth * 180; }); 

    // Declare the nodes… 
    var node = svg.selectAll("g.node") 
     .data(nodes, function(d) { return d.id || (d.id = ++i); }); 

    // Enter the nodes. 
    var nodeEnter = node.enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { 
      return "translate(" + d.y + "," + d.x + ")"; }); 

    nodeEnter.append("circle") 
     .attr("r", 10) 
     .style("fill", "#fff"); 

    nodeEnter.append("text") 
     .attr("x", function(d) { 
      return d.children || d._children ? -13 : 13; }) 
     .attr("dy", ".35em") 
     .attr("text-anchor", function(d) { 
      return d.children || d._children ? "end" : "start"; }) 
     .text(function(d) { return d.name; }) 
     .style("fill-opacity", 1); 

    // Declare the links… 
    var link = svg.selectAll("path.link") 
     .data(links, function(d) { return d.target.id; }); 

    // Enter the links. 
    link.enter().insert("path", "g") 
     .attr("class", "link") 
     .attr("d", diagonal); 

} 

更新：問題是的Datatree不承認作爲一個陣列。我不知道爲什麼

Answer 1

當您將C＃值傳遞給HTML/JavaScript時，最好使用輸入值。

看來，你做的：

@Html.HiddenFor(t=> t.yourdata) 

在JavaScript中，你這樣做：

var data = $('yourdata').val(); 

你得到的錯誤意味着你在一個非數組變量做array.reduce。