Как передать данные объекта json в диаграммы D3 (например, диаграмма с пузырьками, гистограмма) вместо файлов .JSON?

Question

1. У меня есть объект JSON в файле JS (например MyFirstMashup.js), и я скопировали сценарий для пузырьковой диаграммы в том же JS-файла. Во всех примерах, доступных в Интернете, они использовали json-файлы, например. flare.json, xyz.tsv и т. Д. Я не могу позволить себе этот файл, поскольку я динамически получаю данные в файле MyFirstMashup.js. Вместо этого я приложил код пузырьковой диаграммы ниже моих существующих кодов js. Но , к сожалению, код пузырьковой диаграммы не работает специально в data.json(). Я думаю, что мне не нужно использовать это, потому что у меня уже есть объект JSON. Если нет, то что нужно отредактировать в коде пузырьковой диаграммы . В MyFirstMashup.js с пузырьковой диаграммы часть и объект JSON ** (вар jsonObj) ** это ---

   вар jsonStr = JSON.stringify (матрица);
   var jsonObj = JSON.parse (jsonStr); // объект JSON

   var bubble = d3.layout.pack() 
        .sort(null) 
        .size([diameter, diameter]) 
        .padding(1.5); 
   
   var svg = d3.select("body").append("svg") 
        .attr("width", diameter) 
        .attr("height", diameter) 
        .attr("class", "bubble"); 
   
   d3.json("flare.json", function(error, root) { //hw to replace flare.json 
       if (error) throw error;     //with jsonObj(any json object) 
   
       var node = svg.selectAll(".node") 
        .data(bubble.nodes(classes(root)) 
        .filter(function(d) { return !d.children; })) 
        .enter().append("g") 
        .attr("class", "node") 
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 
   
       node.append("title") 
        .text(function(d) { return d.className + ": " + format(d.value); }); 
   
       node.append("circle") 
        .attr("r", function(d) { return d.r; }) 
        .style("fill", function(d) { return color(d.packageName); }); 
   
       node.append("text") 
        .attr("dy", ".3em") 
        .style("text-anchor", "middle") 
        .text(function(d) { return d.className.substring(0, d.r/3); }); 
       }); 
   
   // Returns a flattened hierarchy containing all leaf nodes under the root. 
       function classes(root) { 
       var classes = []; 
   
       function recurse(name, node) { 
        if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
        else classes.push({packageName: name, className: node.name, value: node.size}); 
       } 
   
       recurse(null, root); 
       return {children: classes}; 
       } 
   
       d3.select(self.frameElement).style("height", diameter + "px"); 
   

Answer 1

Затем, вместо того, чтобы использовать функцию d3.json вы можете создать функцию рендеринга, как это:

var jsonStr = JSON.stringify(matrix); 
var jsonObj = JSON.parse(jsonStr); //json object 

var bubble = d3.layout.pack() 
     .sort(null) 
     .size([diameter, diameter]) 
     .padding(1.5); 

var svg = d3.select("body").append("svg") 
     .attr("width", diameter) 
     .attr("height", diameter) 
     .attr("class", "bubble"); 

render(jsonObj); // And simply call it like this. 

function render(root) { 

    var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(root)) 
     .filter(function(d) { return !d.children; })) 
     .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

    node.append("title") 
     .text(function(d) { return d.className + ": " + format(d.value); }); 

    node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }); 

    node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.className.substring(0, d.r/3); }); 
    }; 

// Returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
     if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
     else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
    } 



    d3.select(self.frameElement).style("height", diameter + "px"); 

или удалить рендер функцию и непосредственно использовать jsonObj внутри .data(bubble.nodes(classes(jsonObj))

var jsonStr = JSON.stringify(matrix); 
var jsonObj = JSON.parse(jsonStr); //json object 

var bubble = d3.layout.pack() 
     .sort(null) 
     .size([diameter, diameter]) 
     .padding(1.5); 

var svg = d3.select("body").append("svg") 
     .attr("width", diameter) 
     .attr("height", diameter) 
     .attr("class", "bubble"); 

var node = svg.selectAll(".node") 
     .data(bubble.nodes(classes(jsonObj)) 
     .filter(function(d) { return !d.children; })) 
     .enter().append("g") 
     .attr("class", "node") 
     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

node.append("title") 
     .text(function(d) { return d.className + ": " + format(d.value); }); 

node.append("circle") 
     .attr("r", function(d) { return d.r; }) 
     .style("fill", function(d) { return color(d.packageName); }); 

node.append("text") 
     .attr("dy", ".3em") 
     .style("text-anchor", "middle") 
     .text(function(d) { return d.className.substring(0, d.r/3); }); 


// Returns a flattened hierarchy containing all leaf nodes under the root. 
    function classes(root) { 
    var classes = []; 

    function recurse(name, node) { 
     if (node.children) node.children.forEach(function(child) { recurse(node.name, child); }); 
     else classes.push({packageName: name, className: node.name, value: node.size}); 
    } 

    recurse(null, root); 
    return {children: classes}; 
    } 



    d3.select(self.frameElement).style("height", diameter + "px"); 

Пример скрипку: http://jsfiddle.net/mzz9B/47/