我正在玩在这里发布的圆形图布局：http://bl.ocks.org/sjengle/5432087添加了一些功能，等等...
现在，我正在尝试在圆周围添加组标签。我希望它看起来类似于：here the image
我已经有了节点标签，但是无法找出添加组标签的正确方法。发现将文本追加到路径的可能性，但这可能不是这样，或者我不知道：/
以下是示例数据（可悲，但必须减少一些链接）：
{
"nodes":[
{"name":"Myriel","group":1},
{"name":"Napoleon","group":1},
{"name":"Mlle.Baptistine","group":1},
{"name":"Mme.Magloire","group":1},
{"name":"CountessdeLo","group":1},
{"name":"Geborand","group":1},
{"name":"Champtercier","group":1},
{"name":"Cravatte","group":1},
{"name":"Count","group":1},
{"name":"OldMan","group":1},
{"name":"Labarre","group":2},
{"name":"Valjean","group":2},
{"name":"Marguerite","group":3},
{"name":"Mme.deR","group":2},
{"name":"Isabeau","group":2},
{"name":"Gervais","group":2},
{"name":"Tholomyes","group":3},
{"name":"Listolier","group":3},
{"name":"Fameuil","group":3},
{"name":"Blacheville","group":3},
{"name":"Favourite","group":3},
{"name":"Dahlia","group":3},
{"name":"Zephine","group":3},
{"name":"Fantine","group":3},
{"name":"Mme.Thenardier","group":4},
{"name":"Thenardier","group":4},
{"name":"Cosette","group":5},
{"name":"Javert","group":4},
{"name":"Fauchelevent","group":0},
{"name":"Bamatabois","group":2},
{"name":"Perpetue","group":3},
{"name":"Simplice","group":2},
{"name":"Scaufflaire","group":2},
{"name":"Woman1","group":2},
{"name":"Judge","group":2},
{"name":"Champmathieu","group":2},
{"name":"Brevet","group":2},
{"name":"Chenildieu","group":2},
{"name":"Cochepaille","group":2},
{"name":"Pontmercy","group":4},
{"name":"Boulatruelle","group":6},
{"name":"Eponine","group":4},
{"name":"Anzelma","group":4},
{"name":"Woman2","group":5},
{"name":"MotherInnocent","group":0},
{"name":"Gribier","group":0},
{"name":"Jondrette","group":7},
{"name":"Mme.Burgon","group":7},
{"name":"Gavroche","group":8},
{"name":"Gillenormand","group":5},
{"name":"Magnon","group":5},
{"name":"Mlle.Gillenormand","group":5},
{"name":"Mme.Pontmercy","group":5},
{"name":"Mlle.Vaubois","group":5},
{"name":"Lt.Gillenormand","group":5},
{"name":"Marius","group":8},
{"name":"BaronessT","group":5},
{"name":"Mabeuf","group":8},
{"name":"Enjolras","group":8},
{"name":"Combeferre","group":8},
{"name":"Prouvaire","group":8},
{"name":"Feuilly","group":8},
{"name":"Courfeyrac","group":8},
{"name":"Bahorel","group":8},
{"name":"Bossuet","group":8},
{"name":"Joly","group":8},
{"name":"Grantaire","group":8},
{"name":"MotherPlutarch","group":9},
{"name":"Gueulemer","group":4},
{"name":"Babet","group":4},
{"name":"Claquesous","group":4},
{"name":"Montparnasse","group":4},
{"name":"Toussaint","group":5},
{"name":"Child1","group":10},
{"name":"Child2","group":10},
{"name":"Brujon","group":4},
{"name":"Mme.Hucheloup","group":8}
],
"links":[
{"source":1,"target":0,"value":1},
{"source":2,"target":0,"value":8},
{"source":3,"target":0,"value":10},
{"source":3,"target":2,"value":6},
{"source":4,"target":0,"value":1},
{"source":5,"target":0,"value":1},
{"source":6,"target":0,"value":1},
{"source":7,"target":0,"value":1},
{"source":8,"target":0,"value":2},
{"source":9,"target":0,"value":1},
{"source":11,"target":10,"value":1},
{"source":11,"target":3,"value":3},
{"source":11,"target":2,"value":3},
{"source":11,"target":0,"value":5},
{"source":12,"target":11,"value":1},
{"source":13,"target":11,"value":1},
{"source":14,"target":11,"value":1},
{"source":15,"target":11,"value":1},
{"source":17,"target":16,"value":4},
{"source":18,"target":16,"value":4},
{"source":18,"target":17,"value":4},
{"source":19,"target":16,"value":4},
{"source":19,"target":17,"value":4},
{"source":19,"target":18,"value":4},
{"source":20,"target":16,"value":3},
{"source":20,"target":17,"value":3},
{"source":20,"target":18,"value":3},
{"source":20,"target":19,"value":4},
{"source":21,"target":16,"value":3},
{"source":21,"target":17,"value":3},
{"source":21,"target":18,"value":3},
{"source":21,"target":19,"value":3},
{"source":21,"target":20,"value":5},
{"source":22,"target":16,"value":3},
{"source":22,"target":17,"value":3},
{"source":22,"target":18,"value":3},
{"source":22,"target":19,"value":3},
{"source":22,"target":20,"value":4},
{"source":22,"target":21,"value":4},
{"source":23,"target":16,"value":3},
{"source":23,"target":17,"value":3},
{"source":23,"target":18,"value":3},
{"source":23,"target":19,"value":3},
{"source":23,"target":20,"value":4},
{"source":23,"target":21,"value":4},
{"source":23,"target":22,"value":4},
{"source":23,"target":12,"value":2},
{"source":23,"target":11,"value":9},
{"source":24,"target":23,"value":2},
{"source":24,"target":11,"value":7},
{"source":25,"target":24,"value":13},
{"source":25,"target":23,"value":1},
{"source":25,"target":11,"value":12},
{"source":26,"target":24,"value":4},
{"source":26,"target":11,"value":31},
{"source":26,"target":16,"value":1},
{"source":26,"target":25,"value":1},
{"source":27,"target":11,"value":17},
{"source":27,"target":23,"value":5},
{"source":27,"target":25,"value":5},
{"source":27,"target":24,"value":1},
{"source":27,"target":26,"value":1},
{"source":28,"target":11,"value":8},
{"source":28,"target":27,"value":1},
{"source":29,"target":23,"value":1},
{"source":29,"target":27,"value":1},
{"source":29,"target":11,"value":2},
{"source":30,"target":23,"value":1},
{"source":31,"target":30,"value":2},
{"source":31,"target":11,"value":3},
{"source":31,"target":23,"value":2},
{"source":31,"target":27,"value":1},
{"source":32,"target":11,"value":1},
{"source":33,"target":11,"value":2},
{"source":33,"target":27,"value":1},
{"source":34,"target":11,"value":3},
{"source":34,"target":29,"value":2},
{"source":35,"target":11,"value":3},
{"source":35,"target":34,"value":3},
{"source":35,"target":29,"value":2},
{"source":36,"target":34,"value":2},
{"source":36,"target":35,"value":2},
{"source":36,"target":11,"value":2},
{"source":36,"target":29,"value":1},
{"source":37,"target":34,"value":2},
{"source":37,"target":35,"value":2},
{"source":37,"target":36,"value":2},
{"source":37,"target":11,"value":2},
{"source":37,"target":29,"value":1},
{"source":38,"target":34,"value":2},
{"source":38,"target":35,"value":2},
{"source":38,"target":36,"value":2},
{"source":38,"target":37,"value":2},
{"source":38,"target":11,"value":2},
{"source":38,"target":29,"value":1},
{"source":39,"target":25,"value":1},
{"source":40,"target":25,"value":1},
{"source":41,"target":24,"value":2},
{"source":41,"target":25,"value":3},
{"source":42,"target":41,"value":2},
{"source":42,"target":25,"value":2},
{"source":42,"target":24,"value":1},
{"source":43,"target":11,"value":3},
{"source":43,"target":26,"value":1},
{"source":43,"target":27,"value":1},
{"source":44,"target":28,"value":3},
{"source":44,"target":11,"value":1},
{"source":45,"target":28,"value":2},
{"source":47,"target":46,"value":1},
{"source":48,"target":47,"value":2},
{"source":48,"target":25,"value":1},
{"source":48,"target":27,"value":1},
{"source":48,"target":11,"value":1},
{"source":49,"target":26,"value":3},
{"source":49,"target":11,"value":2},
{"source":50,"target":49,"value":1},
{"source":50,"target":24,"value":1},
{"source":51,"target":49,"value":9},
{"source":51,"target":26,"value":2},
{"source":51,"target":11,"value":2},
{"source":52,"target":51,"value":1},
{"source":52,"target":39,"value":1},
{"source":53,"target":51,"value":1},
{"source":54,"target":51,"value":2},
{"source":54,"target":49,"value":1},
{"source":54,"target":26,"value":1},
{"source":55,"target":51,"value":6},
{"source":55,"target":49,"value":12},
{"source":55,"target":39,"value":1},
{"source":55,"target":54,"value":1},
{"source":55,"target":26,"value":21},
{"source":55,"target":11,"value":19},
{"source":55,"target":16,"value":1},
{"source":55,"target":25,"value":2},
{"source":55,"target":41,"value":5},
{"source":55,"target":48,"value":4},
{"source":56,"target":49,"value":1},
{"source":56,"target":55,"value":1},
{"source":57,"target":55,"value":1},
{"source":57,"target":41,"value":1},
{"source":57,"target":48,"value":1},
{"source":58,"target":55,"value":7},
{"source":58,"target":48,"value":7},
{"source":58,"target":27,"value":6},
{"source":58,"target":57,"value":1},
{"source":58,"target":11,"value":4},
{"source":59,"target":58,"value":15},
{"source":59,"target":55,"value":5},
{"source":59,"target":48,"value":6},
{"source":59,"target":57,"value":2},
{"source":60,"target":48,"value":1},
{"source":60,"target":58,"value":4},
{"source":60,"target":59,"value":2},
{"source":61,"target":48,"value":2},
{"source":61,"target":58,"value":6},
{"source":61,"target":60,"value":2},
{"source":61,"target":59,"value":5},
{"source":61,"target":57,"value":1},
{"source":61,"target":55,"value":1},
{"source":62,"target":55,"value":9},
{"source":62,"target":58,"value":17},
{"source":62,"target":59,"value":13},
{"source":62,"target":48,"value":7},
{"source":62,"target":57,"value":2},
{"source":62,"target":41,"value":1},
{"source":62,"target":61,"value":6},
{"source":62,"target":60,"value":3},
{"source":63,"target":59,"value":5},
{"source":63,"target":48,"value":5},
{"source":63,"target":62,"value":6},
{"source":63,"target":57,"value":2},
{"source":63,"target":58,"value":4},
{"source":63,"target":61,"value":3},
{"source":63,"target":60,"value":2},
{"source":63,"target":55,"value":1},
{"source":64,"target":55,"value":5},
{"source":64,"target":62,"value":12},
{"source":64,"target":48,"value":5},
{"source":64,"target":63,"value":4},
{"source":64,"target":58,"value":10},
{"source":64,"target":61,"value":6},
{"source":64,"target":60,"value":2},
{"source":64,"target":59,"value":9},
{"source":64,"target":57,"value":1},
{"source":64,"target":11,"value":1},
{"source":65,"target":63,"value":5},
{"source":65,"target":64,"value":7},
{"source":65,"target":48,"value":3},
{"source":65,"target":62,"value":5},
{"source":65,"target":58,"value":5},
{"source":65,"target":61,"value":5},
{"source":65,"target":60,"value":2},
{"source":65,"target":59,"value":5},
{"source":65,"target":57,"value":1},
{"source":65,"target":55,"value":2},
{"source":66,"target":64,"value":3},
{"source":66,"target":58,"value":3},
{"source":66,"target":59,"value":1},
{"source":66,"target":62,"value":2},
{"source":66,"target":65,"value":2},
{"source":66,"target":48,"value":1},
{"source":66,"target":63,"value":1},
{"source":66,"target":61,"value":1},
{"source":66,"target":60,"value":1},
{"source":67,"target":57,"value":3},
{"source":68,"target":25,"value":5},
{"source":68,"target":11,"value":1},
{"source":68,"target":24,"value":1},
{"source":68,"target":27,"value":1},
{"source":68,"target":48,"value":1},
{"source":68,"target":41,"value":1},
{"source":69,"target":25,"value":6},
{"source":69,"target":68,"value":6},
{"source":69,"target":11,"value":1},
{"source":69,"target":24,"value":1},
{"source":69,"target":27,"value":2},
{"source":69,"target":48,"value":1},
{"source":69,"target":41,"value":1},
{"source":70,"target":25,"value":4},
{"source":70,"target":69,"value":4},
{"source":70,"target":68,"value":4},
{"source":70,"target":11,"value":1},
{"source":70,"target":24,"value":1},
{"source":70,"target":27,"value":1},
{"source":70,"target":41,"value":1},
{"source":70,"target":58,"value":1},
{"source":71,"target":27,"value":1},
{"source":71,"target":69,"value":2},
{"source":71,"target":68,"value":2},
{"source":71,"target":70,"value":2},
{"source":71,"target":11,"value":1},
{"source":71,"target":48,"value":1},
{"source":71,"target":41,"value":1},
{"source":71,"target":25,"value":1},
{"source":72,"target":26,"value":2},
{"source":72,"target":27,"value":1},
{"source":72,"target":11,"value":1},
{"source":73,"target":48,"value":2}
]
}
在我自己的数据中，我可以将“ groupName”添加到“ nodes”。然后将显示groupNames，但每个组仅显示一次...就像我提供的链接中一样。
这是我的完整代码（当我尝试实现某项功能时可能会有些死胡同……还没有时间清理它。）：
function sep_script () {
var diameter = 1060;
var radius = diameter / 2;
var margin = 240;
// NEW for mouseover and so, define graph for global
var graphData = null;
// Generates a tooltip for a SVG circle element based on its ID
function addTooltip(circle) {
var x = parseFloat(circle.attr("cx"));
var y = parseFloat(circle.attr("cy"));
var r = parseFloat(circle.attr("r"));
var text = circle.attr("id");
var tooltip = d3.select("#plot")
.append("text")
.text(text)
.attr("x", x)
.attr("y", y)
.attr("dy", -r * 2)
.attr("id", "tooltip");
var offset = tooltip.node().getBBox().width / 2;
if ((x - offset) < -radius) {
tooltip.attr("text-anchor", "start");
tooltip.attr("dx", -r);
}
else if ((x + offset) > (radius)) {
tooltip.attr("text-anchor", "end");
tooltip.attr("dx", r);
}
else {
tooltip.attr("text-anchor", "middle");
tooltip.attr("dx", 0);
}
}
// Draws an arc diagram for the provided undirected graph
function drawGraph(graph) {
// NEW for mouseover and so, define graph for global
graphData = graph;
console.log(graphData);
// create svg image
var svg = d3.select("body").select("#circle")
.append("svg")
.attr("width", diameter)
.attr("height", diameter);
// draw border around svg image
// svg.append("rect")
// .attr("class", "outline")
// .attr("width", diameter)
// .attr("height", diameter);
// create plot area within svg image
var plot = svg.append("g")
.attr("id", "plot")
.attr("transform", "translate(" + radius + ", " + radius + ")");
// draw border around plot area
plot.append("circle")
.attr("id", "wavy")
.attr("class", "outline")
.attr("r", radius - margin);
/*
// NEW doesnt work append text around the circle
plot.append("text")
.append("textPath") //append a textPath to the text element
.attr("xlink:href", "#wavy") //place the ID of the path here
.style("text-anchor","middle") //place the text halfway on the arc
.attr("startOffset", "50%")
.text("Yay, my text is on a wavy path") */
// fix graph links to map to objects instead of indices
graph.links.forEach(function(d, i) {
d.source = isNaN(d.source) ? d.source : graph.nodes[d.source];
d.target = isNaN(d.target) ? d.target : graph.nodes[d.target];
});
// calculate node positions
circleLayout(graph.nodes);
// draw edges first
//drawLinks(graph.links);
// draw Curves
//drawCurves(graph.links);
// NEW draw bundled Curves (Not bundled as I wish)
drawBundledButNotCurves(graph.links);
// NEW draw bundled Curves
//drawBundledCurves(graph.links);
// draw nodes last
drawNodes(graph.nodes);
// NEW draw groups
//drawGroups(graph.nodes);
}
// Calculates node locations
function circleLayout(nodes) {
// sort nodes by group
nodes.sort(function(a, b) {
return a.group - b.group;
});
// use to scale node index to theta value
var scale = d3.scale.linear()
.domain([nodes.length, 0])
.range([Math.PI, 3 * Math.PI]);
// calculate theta for each node
nodes.forEach(function(d, i) {
// calculate polar coordinates
var theta = scale(i);
var radial = radius - margin;
// convert to cartesian coordinates
d.x = radial * Math.sin(theta);
d.y = radial * Math.cos(theta);
});
};
// NEW mouseover and mouseout from:
// https://stackoverflow.com/questions/51559999/d3-js-select-connected-nodes-on-mouseover
function mouseover(d) {
d3.select("#plot").selectAll(".link")
.filter(function(l) { return l.source.name === d.name || l.target.name === d.name; })
.filter(function(l) { return l.value > 0; })
//.filter(function(l) { return console.log(l)})
//.style("font-weight", 700);
.style("stroke-width", "4px")
.style("stroke-opacity", 1);
d3.select("#plot").selectAll(".link")
.filter(function(l) { return l.source.name != d.name && l.target.name != d.name; })
.filter(function(l) { return l.value > 0; })
//.filter(function(l) { return console.log(l)})
//.style("font-weight", 700);
//.style("stroke-width", "4px")
.style("stroke-opacity", 0.1);
// highligh the selected
d3.select("#plot").selectAll(".nodeText")
.filter(function(l) { return l.name === d.name})
.style("font-weight", 700);
d3.select("#plot").selectAll(".nodeText")
.each(function(n) {
for (let index = 0; index < graphData.links.length; index++) {
const element = graphData.links[index];
if ( (element.source.name === d.name && element.target.name === n.name && element.value > 0) ||
(element.target.name === d.name && element.source.name === n.name && element.value > 0)
) {
//d3.select(this).attr("r", 18);
d3.select(this)
.style("font-weight", 700);
return;
}
}
});
}
function mouseout(d) {
//console.log("mouseout");
/*
d3.select("#plot").selectAll(".link")
.classed("highlight downlight", false); */
/*
d3.select("#plot").selectAll(".node")
.attr("r", 5)
.classed("highlight", false); */
d3.select("#plot").selectAll(".link")
//.transition().duration(3000)
.style("stroke-width", "1px")
.style("stroke-opacity", 0.5);
d3.select("#plot").selectAll(".nodeText")
//.transition().duration(3000)
.style("font-weight", 400);
}
// Draws nodes with tooltips
function drawNodes(nodes) {
// OLD used to assign nodes color by group
//var color = d3.scale.category20();
// NEW colors for nodes with white ones to make categories look bundled
//var colors = ['steelblue', '#ffffff00'];
// colors for nodes to hide circles
var colors = ['#ffffff00'];
var color = d3.scale.ordinal().range(colors);
d3.select("#plot").selectAll(".node")
.data(nodes)
.enter()
.append("circle")
.attr("class", "node")
.attr("id", function(d, i) { return d.name; })
.attr("cx", function(d, i) { return d.x; })
.attr("cy", function(d, i) { return d.y; })
.attr("r", 5)
.style("fill", function(d, i) { return color(d.group); });
//.on("mouseover", function(d, i) { addTooltip(d3.select(this)); })
//.on("mouseout", function(d, i) { d3.select("#tooltip").remove(); });
// NEW scale for rotation
var rotationScale = d3.scale.pow()
.exponent(1.9)
.range([-90, 90])
.domain([-290,290]);
// NEW add text labels
d3.select("#plot").selectAll(".nodeText") //???? ".nodeText"
.data(nodes)
.enter()
.append("text")
.attr("class", "nodeText")
.attr("dy", ".31em")
.attr("transform", function(d) { return "translate(" + (d.x) + ", " + (d.y) + ")rotate(" + (d.x < 0 ? rotationScale(-d.y) : rotationScale(d.y)) + ")translate(" + (d.x < 0 ? (-28) : (28)) + ", " + 0 + ")"})
// sets the origin of rotation to the node's location ^^^^^^^^^^ ^^rotates the label for right half the other way round then the left half ^^and shifts the label a bit from the circle
.style("text-anchor", function(d) { return d.x > 0 ? "start" : "end"; })
//.style("text_anchor", "bottom")
.text(function(d) { return d.name; })
//.on("mouseover", mouseovered)
//.on("mouseout", mouseouted)
//.on('dblclick', connectedNodes); // NEW Added code for doubleclick;
.on("mouseover", function(d) { mouseover(d); })
.on("mouseout", mouseout);
};
/*
// NEW Draws groups
function drawGroups(nodes) {
*/ /*
// NEW scale for rotation
var rotationScale = d3.scale.pow()
.exponent(1.9)
.range([-90, 90])
.domain([-290,290]);
// NEW add text labels
d3.select("#plot").selectAll(".group") //???? ".nodeText"
.data(nodes)
.enter()
.append("text")
.attr("class", "nodeText")
.attr("dy", ".31em")
.attr("transform", function(d) { return "translate(" + (d.x) + ", " + (d.y) + ")rotate(" + (d.x < 0 ? rotationScale(-d.y) : rotationScale(d.y)) + ")translate(" + (d.x < 0 ? (-8) : (8)) + ", " + 0 + ")"})
// sets the origin of rotation to the node's location ^^^^^^^^^^ ^^rotates the label for right half the other way round then the left half ^^and shifts the label a bit from the circle
.style("text-anchor", function(d) { return d.x > 0 ? "start" : "end"; })
//.style("text_anchor", "bottom")
.text(function(d) { return d.group; })
};
*/
// Draws straight edges between nodes
function drawLinks(links) {
d3.select("#plot").selectAll(".link")
.data(links)
.enter()
.append("line")
.attr("class", "link")
.attr("x1", function(d) { return d.source.x; })
.attr("y1", function(d) { return d.source.y; })
.attr("x2", function(d) { return d.target.x; })
.attr("y2", function(d) { return d.target.y; });
};
// Draws curved edges between nodes
function drawCurves(links) {
// remember this from tree example?
var curve = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
d3.select("#plot").selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", curve);
};
// NEW Draws bundled curves between nodes
var curveBeta = 0.85 /*variable for the visual effect of bundling lines together
the higher the more concise, otherwise lines are all over the place*/
var bundle = d3.layout.bundle();
var line = d3.svg.line.radial() //constructs a new radial line generator
.interpolate("bundle")
.tension(curveBeta) /* sets the curvature of the line
curveBundle is a type of curvature used for hiearchical data, the bigger the beta the more curved */
.radius(function(d) { return d.y; }) //sets how far the lines spread out from the origin for all the data
.angle(function(d) { return d.x / 180 * Math.PI; }); //positions the individual lines for individual data
//var link = svg.append("g").selectAll(".link"); //appends group and makes a selection of links
var curve = d3.svg.diagonal()
.projection(function(d) { return [d.x, d.y]; });
function drawBundledCurves(links) {
d3.select("#plot").selectAll(".link")
//.style("filter", "grayscale(1)")
.data(bundle(links))
.enter()
.append("path") //enter makes path for every data with following:
.each(function(d) { d.source, d.target; }) //returns all pairs of connected data
.attr("class", "link") //make a class for CSS
.attr("d", line); //d sets the "path" for the path and line sets the "looks"
};
// NEW added for color ---
var colorScale = d3.scale.quantize()
.range(["#8bc3f6","#51acff","#2f86ff","#0051ff"])
.domain([0, 0.8]);
// added for color ---
// NEW Draws bundled curved edges between nodes (Not bundled as I wish)
function drawBundledButNotCurves(links) {
// https://stackoverflow.com/questions/34263110/d3-js-edge-bundling-without-hierachy
d3.select("#plot").selectAll(".link")
.data(links)
.enter()
.append("path")
.attr("class", "link")
.attr("d", function(d){
var lineData = [
{
x: Math.round(d.target.x),
y: Math.round(d.target.y)
}, {
x: Math.round(d.target.x) - Math.round(d.target.x)/3,
y: Math.round(d.target.y) - Math.round(d.target.y)/3
},
{
x: Math.round(d.source.x) - Math.round(d.source.x)/3,
y: Math.round(d.source.y) - Math.round(d.source.y)/3
},{
x: Math.round(d.source.x),
y: Math.round(d.source.y)
}];
return `M${lineData[0].x},${lineData[0].y}C${lineData[1].x},${lineData[1].y},${lineData[2].x},${lineData[2].y},${lineData[3].x},${lineData[3].y} `;
})
// added for color
.style("stroke", function(d){
return colorScale(d.value)
})
// filter to hide bonds with value equal to 0
.filter(function(d) { return d.value === 0; })
//.filter(function(l) { return console.log(l)})
//.style("font-weight", 700);
//.style("stroke-width", "4px")
.style("stroke", "#ffffff00");
};
d3.json("flare_newC.json", drawGraph);
}