How to change the shape of point according to value in d3.js force-directed graph

39 views

Skip to first unread message

shaw...@gmail.com

unread,

Apr 20, 2018, 12:10:31 PM4/20/18

to d3-js

Hello everyone,

I am currently working on d3.js I want to change the shape of specific points according to value, how can I do this? The code is posted below:

<style>

.link {
fill: none;
stroke: #666;
stroke-width: 1.5px;
}

#licensing {
fill: green;
 }

.link.licensing {
 stroke: green;
 }

.link.resolved {
 stroke-dasharray: 0,2 1;
}

circle {
fill: #ccc;
stroke: #333;
stroke-width: 1.5px;
}

text {
font: 15px sans-serif;
pointer-events: none;
text-shadow: 0 1px 0 #fff, 1px 0 0 #fff, 0 -1px 0 #fff, -1px 0 0 #fff;
 }

</style>

<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jsnetworkx/0.3.4/jsnetworkx.js"> . 
</script>
<div align="">
<script>
// http://blog.thomsonreuters.com/index.php/mobile-patent-suits-graphic-of- 
the-day/
var links = [
{% for obj in graphelement %}
{% if obj.stoichiometry1 != '' and obj.stoichiometry1 > 0 %}
{source: "{{ obj.id }}", target: "{{ obj.metabolite1_id }}", type: 
"licensing"},
{% elif  obj.stoichiometry1 != '' and obj.stoichiometry1 < 0%}
{source: "{{ obj.metabolite1_id }}", target:"{{ obj.id }}", type:"suit"},
{% endif %}
{% endfor%}
];

var nodes ={};

// Compute the distinct nodes from the links.
links.forEach(function(link) {
link.source = nodes[link.source] || (nodes[link.source] = {name: 
link.source});
link.target = nodes[link.target] || (nodes[link.target] = {name: 
link.target});
});

var width = 960,
height = 500;

var force = d3.layout.force()
.nodes(d3.values(nodes))
.links(links)
.size([width, height])
.linkDistance(150)
.charge(-1500)
.on("tick", tick)
.start();

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

// Per-type markers, as they don't inherit styles.
svg.append("defs").selectAll("marker")
.data(["suit", "licensing", "resolved"])
.enter().append("marker")
.attr("id", function(d) { return d; })
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", -1.5)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("path")
.attr("d", "M0,-5L10,0L0,5");

 var path = svg.append("g").selectAll("path")
.data(force.links())
.enter().append("path")
.attr("class", function(d) { return "link " + d.type; })
.attr("marker-end", function(d) { return "url(#" + d.type + ")"; });

var circle = svg.append("g").selectAll("circle")
.data(force.nodes())
.enter().append("circle")
.attr("r", 10)
.call(force.drag);

var text = svg.append("g").selectAll("text")
.data(force.nodes())
.enter().append("text")
.attr("x", 8)
.attr("y", ".31em")
.text(function(d) { return d.name; });

// Use elliptical arc path segments to doubly-encode directionality.
 function tick() {
 path.attr("d", linkArc);
 circle.attr("transform", transform);
 text.attr("transform", transform);
}

function linkArc(d) {
var dx = d.target.x - d.source.x,
  dy = d.target.y - d.source.y,
  dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.x + "," + d.source.y + "A" + dr + "," + dr + " 0 0,1 " + 
d.target.x + "," + d.target.y;
}

function transform(d) {
return "translate(" + d.x + "," + d.y + ")";
}

</script>
</div>
</body>
{% endblock %}

This graph is designed to draw the reaction, and within var links, I use 'if' statement to judge whether an element should be pointed to the 'obj.id' or not. In order to make the generated graph looks more clear, I want to change the shape of element 'obj.id'. For example, I want to change the shape of 'obj.id' to square. How can I do that? Or if I can change the radius of specific points also works fine for me

Reply all

Reply to author

Forward

0 new messages