javascript - Override d3 index values in Force-Directed Graph -
i using force directed graph draw entity relationships company. use built in index value "index" of node instead of array index. how override d3 index value gets set? fiddle - http://jsfiddle.net/thielcole/ed9noqw1/
var forcelinks = []; var forcedata = []; d3.csv('amazonexampleforicharts.csv', function(d) { return { // index use index: d.node, parent: d.parentnode, color: d.nodecolor, level: d.hierarchy_code, business: d.business_name, power: d.decisionpower, hover: d.hoverovervalue, link: d.linkvalue }; }, function(error, rows) { forcedata = rows; $.each(forcedata, function(i, d) { // console.log(d.parent); if (d.parent != "" && d.parent !== undefined) { // generating link information here, have subtract 1 match array index forcelinks.push({source: parseint(d.parent , 10) - 1 , target: parseint(d.index , 10) - 1, value: parseint(d.level , 10)}); } console.log(d); }); $.each(forcelinks, function(i, d) { // console.log(d); }); initiatechart(); }); function initiatechart() { var height = 1000, width = 1400; var graphdata = []; var graphlinks = []; graphdata = forcedata; graphlinks = forcelinks; var color = d3.scale.category20(); var svg = d3.select('.svg') .attr('width', width) .attr('height', height); var force = d3.layout.force() .charge(-120) .linkdistance(30) .size([width, height]); // gets set force.nodes(graphdata) .links(graphlinks) .start(); var link = svg.selectall('.link') .data(graphlinks) .enter().append('line') .attr('class', 'link') .style('stroke-width', function (d) { return math.sqrt(d.value); }); var node = svg.selectall('.node') .data(graphdata) .enter().append('circle') .attr('class', 'node') .attr('r', 8) .style('fill', function (d) { return color(d.level); }) .on('mouseover', function(d , i) { d3.select(this).attr('r', 12); var tooltip = d3.select('body') .append('div') .attr('class', 'tooltip') .style('position','absolute') .style('top', (d3.event.pagey - 10) + 'px') .style('left' , (d3.event.pagex) + 'px' ) .style('z-index' , '10') .text(d.hover); console.log(d) }) .on('click', function(d , i) { showchildren(d); }) .on('mouseout', function(d, i) { d3.select(this).attr('r', 8); d3.select('body').selectall('.tooltip') .remove(); }) .call(force.drag); //now giving svgs co-ordinates - force layout generating co-ordinates code using update attributes of svg elements force.on("tick", function () { 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; }); node.attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }) }); }
var node = svg.selectall('.node') .data(graphdata) .enter().append('circle') .attr('class', 'node') .attr('r', 8) .attr('id', function(d){return(d.index);})// use data 'index' property node 'id' attribute .style('fill', function (d) { return color(d.level); }) .call(force.drag); the 'index'-es stored in circles 'id' attributes strings (not numbers):
you can add attributes want , recall them later. actually, id tag not best choice. better alternatives are: data-index, data-id, data-company etc.
ps:
the notation .attr('class', 'node') not mistake, d3.js have special selection.classed(name[, value]) method classes. recommend attributes use native js arrays:
var styles = { node: {stroke: "white", "stroke-width": 1.5, r: 8}, link: {stroke: "#999", "stroke-width": 0.6} }; ... var node = svg.selectall('.node') ... .attr(styles.node) ... by way, in svg fill attribute.