d3.js иерархическое группирование края: встраивать данные JSON в переменной

Question

Я хотел бы прочитать данные JSON непосредственно в переменной, например

var HEBdata = [ 
{"name":"test.cluster1.item1","imports":["test.cluster1.item2","test.cluster1.item3"]}, 
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]}, 
{"name":"test.cluster1.item3"} 
]; 

Я бы затем использовать эту переменную здесь

d3.json(HEBdata, function(error, classes) { 
    if (error) throw error; 

Вместо

d3.json("https://gist.githubusercontent.com/mbostock/1044242/raw/8f22cf2264e1f6ec6cb233c4b49333fb8f75bb99/readme-flare-imports.json", function(error, classes) { 
    if (error) throw error; 

Вот скрипка с кодом, который вы можете изменить: https://fiddle.jshell.net/d1766z4r/ (URL-адрес был ком и заменена переменной HEBdata)

Я хотел был бы сделать это, чтобы использовать пользовательские данные, чтобы сделать его простым для другого вопроса, который я хочу задать позже.

Answer 1

Не используйте d3.json. вместо этого просто назначьте объект вашему var classes.

d3.json по существу делает это:

загружает данные в браузер, использующие XMLHttpRequest или XHR. Это позволяет загружать данные асинхронно (так что остальная страница может отображаться во время загрузки данных) и безопаснее, чем JSONP. Модуль xhr D3 упрощает загрузку и анализ данных. При асинхронной загрузке данных код, который зависит от загруженных данных, обычно должен существовать в функции обратного вызова. Код, который не зависит от данных, может запускаться сразу же при загрузке страницы.

https://github.com/d3/d3-3.x-api-reference/blob/master/Requests.md

Поскольку у вас уже есть ваши данные готовы, вы не должны ждать, чтобы использовать его. Таким образом, любой код, который, как правило, придется ждать, чтобы работать, пока ответ получен Http не может работать сразу, как так:

var classes = [ 
 
{"name":"test.cluster1.item1","imports":["test.cluster1.item2","test.cluster1.item3"]}, 
 
{"name":"test.cluster1.item2","imports":["test.cluster1.item3"]}, 
 
{"name":"test.cluster1.item3"} 
 
]; 
 

 
var diameter = 960, 
 
    radius = diameter/2, 
 
    innerRadius = radius - 120; 
 

 
var cluster = d3.layout.cluster() 
 
    .size([360, innerRadius]) 
 
    .sort(null) 
 
    .value(function(d) { return d.size; }); 
 

 
var bundle = d3.layout.bundle(); 
 

 
var line = d3.svg.line.radial() 
 
    .interpolate("bundle") 
 
    .tension(.85) 
 
    .radius(function(d) { return d.y; }) 
 
    .angle(function(d) { return d.x/180 * Math.PI; }); 
 

 
var svg = d3.select("body").append("svg") 
 
    .attr("width", diameter) 
 
    .attr("height", diameter) 
 
    .append("g") 
 
    .attr("transform", "translate(" + radius + "," + radius + ")"); 
 

 
var link = svg.append("g").selectAll(".link"), 
 
    node = svg.append("g").selectAll(".node"); 
 

 
//d3.json("https://gist.githubusercontent.com/mbostock/1044242/raw/8f22cf2264e1f6ec6cb233c4b49333fb8f75bb99/readme-flare-imports.json", function(error, classes) { 
 
    //if (error) throw error; 
 

 
    var nodes = cluster.nodes(packageHierarchy(classes)), 
 
     links = packageImports(nodes); 
 

 
    link = link 
 
     .data(bundle(links)) 
 
    .enter().append("path") 
 
     .each(function(d) { d.source = d[0], d.target = d[d.length - 1]; }) 
 
     .attr("class", "link") 
 
     .attr("d", line); 
 

 
    node = node 
 
     .data(nodes.filter(function(n) { return !n.children; })) 
 
    .enter().append("text") 
 
     .attr("class", "node") 
 
     .attr("dy", ".31em") 
 
     .attr("transform", function(d) { return "rotate(" + (d.x - 90) + ")translate(" + (d.y + 8) + ",0)" + (d.x < 180 ? "" : "rotate(180)"); }) 
 
     .style("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; }) 
 
     .text(function(d) { return d.key; }) 
 
     .on("mouseover", mouseovered) 
 
     .on("mouseout", mouseouted); 
 
//}); 
 

 
function mouseovered(d) { 
 
    node 
 
     .each(function(n) { n.target = n.source = false; }); 
 

 
    link 
 
     .classed("link--target", function(l) { if (l.target === d) return l.source.source = true; }) 
 
     .classed("link--source", function(l) { if (l.source === d) return l.target.target = true; }) 
 
    .filter(function(l) { return l.target === d || l.source === d; }) 
 
     .each(function() { this.parentNode.appendChild(this); }); 
 

 
    node 
 
     .classed("node--target", function(n) { return n.target; }) 
 
     .classed("node--source", function(n) { return n.source; }); 
 
} 
 

 
function mouseouted(d) { 
 
    link 
 
     .classed("link--target", false) 
 
     .classed("link--source", false); 
 

 
    node 
 
     .classed("node--target", false) 
 
     .classed("node--source", false); 
 
} 
 

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

 
// Lazily construct the package hierarchy from class names. 
 
function packageHierarchy(classes) { 
 
    var map = {}; 
 

 
    function find(name, data) { 
 
    var node = map[name], i; 
 
    if (!node) { 
 
     node = map[name] = data || {name: name, children: []}; 
 
     if (name.length) { 
 
     node.parent = find(name.substring(0, i = name.lastIndexOf("."))); 
 
     node.parent.children.push(node); 
 
     node.key = name.substring(i + 1); 
 
     } 
 
    } 
 
    return node; 
 
    } 
 

 
    classes.forEach(function(d) { 
 
    find(d.name, d); 
 
    }); 
 

 
    return map[""]; 
 
} 
 

 
// Return a list of imports for the given array of nodes. 
 
function packageImports(nodes) { 
 
    var map = {}, 
 
     imports = []; 
 

 
    // Compute a map from name to node. 
 
    nodes.forEach(function(d) { 
 
    map[d.name] = d; 
 
    }); 
 

 
    // For each import, construct a link from the source to target node. 
 
    nodes.forEach(function(d) { 
 
    if (d.imports) d.imports.forEach(function(i) { 
 
     imports.push({source: map[d.name], target: map[i]}); 
 
    }); 
 
    }); 
 

 
    return imports; 
 
}

.node { 
 
    font: 300 11px "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
    fill: #bbb; 
 
} 
 

 
.node:hover { 
 
    fill: #000; 
 
} 
 

 
.link { 
 
    stroke: steelblue; 
 
    stroke-opacity: .4; 
 
    fill: none;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

Скрипки: https://fiddle.jshell.net/ga1s8bn7/