score:2
Accepted answer
You can achieve this in two simple steps
- put the marker on the other end of the path
.attr("marker-start", "url(#end)")
- rotate the marker 180 degrees
.attr("orient", 180)
There was not enough info on MDN about the attributes of the marker however this page has more than enough :)
var width = 500
height = 550;
var cluster = d3.layout.cluster()
.size([height - height * 0, width - width * 0.5]);
var diagonal = d3.svg.diagonal()
.projection(function(d) {
return [d.y, d.x];
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.attr("style", "padding-left:5%")
.attr("pointer-events", "all")
.call(d3.behavior.zoom().on("zoom", redraw));
// Define the div for the tooltip
var div = d3.select("body").append("div")
.attr("class", "tooltip")
.style("opacity", 0);
var vis = svg
.append("svg:g");
vis.append("svg:rect")
.attr("width", width)
.attr("height", height)
.attr("fill", 'white');
function redraw() {
vis.attr("transform",
"translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
}
//var root = {"name":"Canada","children":[{"name":"Newfoundland","children":[{"name":"St. John's"}]},{"name":"PEI","children":[{"name":"Charlottetown"}]},{"name":"Nova Scotia","children":[{"name":"Halifax"}]},{"name":"New Brunswick","children":[{"name":"Fredericton"}]},{"name":"Quebec","children":[{"name":"Montreal"},{"name":"Quebec City"}]},{"name":"Ontario","children":[{"name":"Toronto"},{"name":"Ottawa"}]},{"name":"Manitoba","children":[{"name":"Winnipeg"}]},{"name":"Saskatchewan","children":[{"name":"Regina"}]},{"name":"Nunavuet","children":[{"name":"Iqaluit"}]},{"name":"NWT","children":[{"name":"Yellowknife"}]},{"name":"Alberta","children":[{"name":"Edmonton"}]},{"name":"British Columbia","children":[{"name":"Victoria"},{"name":"Vancouver"}]},{"name":"Yukon","children":[{"name":"Whitehorse"}]}]} ;
var root = {
"name": "output",
"children": [{
"name": "sum",
"children": [{
"name": "Base",
"children": [],
"weight": 1.0000002576768052
}, {
"name": "H0",
"children": [],
"weight": 2.5767680512326025e-7
}]
}]
};
var nodes = cluster.nodes(root),
links = cluster.links(nodes);
vis.append("svg:defs").selectAll("marker")
.data(["end"]) // Different link/path types can be defined here
.enter().append("svg:marker") // This section adds in the arrows
.attr("id", String)
.attr("viewBox", "0 -5 10 10")
.attr("refX", 15)
.attr("refY", 0)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", 180)
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
var link = vis.selectAll(".link")
.data(links)
.enter().append("path")
.attr("class", "link")
.attr("marker-start", "url(#end)")
.attr("d", diagonal);
/*.on("mouseover", function(d) {
//console.log(d.children.weight);
div.transition()
.duration(200)
.style("opacity", .9);
div .html(d.y)
.style("left", (d3.event.pageX) + "px")
.style("top", (d3.event.pageY - 28) + "px");
})
.on("mouseout", function(d) {
div.transition()
.duration(500)
.style("opacity", 0);
});*/
var node = vis.selectAll(".node")
.data(nodes)
.enter().append("g")
.attr("class", "node")
.attr("transform", function(d) {
return "translate(" + d.y + "," + d.x + ")";
})
.on("mouseover", mouseover)
.on("mouseout", mouseout);
node.append("circle")
.attr("r", 4.5)
.style("fill", "#3182bd");
node.append("svg:text")
.attr("dx", function(d) {
return d.children ? -8 : 8;
})
.attr("dy", 3)
.style("text-anchor", function(d) {
return d.children ? "end" : "start";
})
.style("fill", "#3182bd")
.text(function(d) {
return d.name;
});
/*var linktext = vis.append("svg:g").selectAll("g.linklabelholder").data(links);
linktext.enter().append("g").attr("class", "linklabelholder")
.append("text")
.attr("class", "linklabel")
.style("font-size", "13px")
.attr("x", "50")
.attr("y", "-20")
.attr("text-anchor", "start")
.style("fill","#000")
.append("textPath")
.attr("xlink:href",function(d,i) { return "#linkId_" + i;})
.text(function(d) {
return d.type;
});*/
function mouseover() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 9)
d3.select(this).select("text").transition()
.duration(750)
.style("stroke-width", ".5px")
.style("font", "22.8px serif")
.style("opacity", 1);
}
function mouseout() {
d3.select(this).select("circle").transition()
.duration(750)
.attr("r", 4.5)
d3.select(this).select("text").transition()
.duration(750)
.style("font", "12px serif")
.style("opacity", 0.8);
}
d3.select(self.frameElement).style("height", height + "px");
.link {
fill: none;
stroke: #ccc;
opacity: 0.4;
stroke-width: 1.5px;
}
.node circle {
stroke: #fff;
opacity: 0.8;
stroke-width: 1.5px;
}
.node:not(:hover) .nodetext {
display: none;
}
text {
font: 12px serif;
opacity: 0.8;
pointer-events: none;
}
div.tooltip {
position: absolute;
text-align: center;
width: 60px;
height: 28px;
color: black;
padding: 2px;
font: 12px sans-serif;
background: lightsteelblue;
border: 0px;
border-radius: 8px;
pointer-events: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
score:2
Perhaps you could use the attr marker-start
where you mark arrow at line
.attr("marker-end", "url(#end)")
.attr("marker-start", "url(#end)")
IIRC, the hash id is tied to some CSS defined path (ie, the arrow). This would put the shape at the start. You may have to tweak the path if the arrow is 'backwards'
Source: stackoverflow.com
Related Query
- D3 network chart with arrow head pointing towards source node
- D3: Sunburst chart with root node on the outside ring
- Draw pie chart with different radius in D3 (combine force network with pie chart)
- How do I replace a node with an image using D3 and CoffeeScript for a network visualization?
- How to create a % difference arrow line with value in a bar chart using D3.js
- while working with network chart, is there any why to color the common node with two different colors.?
- How to draw arrow head with D3 (Responsive)
- Network node highlighting with Crossfilter
- Issue highlighting node in d3 network with jQuery datepicker
- Show value along with where needle is pointing in d3 gauge chart
- border each node in a network created using networkD3::forceNetwork() with a specific color
- D3.js - Zoom network graph with canvas and then drag node
- Change network chart dynamically with d3plus.js
- how to make sankyplots with no color for source and target node and how to do legend to show the different colors of linkgroup
- How do I remove all children elements from a node and then apply them again with different color and size?
- D3: How to refresh a chart with new data?
- Bar chart with negative values
- D3 force directed graph with drag and drop support to make selected node position fixed when dropped
- How to draw line with arrow using d3.js
- MultiBar chart with nvd3 / d3 only shows labels for every other tick on the x-axis. How can I get them all to show up?
- Using arrow functions with d3
- Display an arrow head in the middle of D3 force layout link
- nvd3 line chart with string values on x-axis
- D3.JS time-series line chart with real-time data, panning and zooming
- Concept Map Network - Node Issue
- Multiseries line chart with mouseover tooltip
- d3.js chart area filling with different colors
- How to update d3.js bar chart with new data
- D3 Sankey chart using circle node instead of rectangle node
- D3: gauge chart with growing arc
More Query from same tag
- D3js Performance issue
- How to pass libraries through Google CAJA?
- D3 zoom is constantly zooming down and right of SVG, how do I fix this?
- d3.js: Display x-axis value and y-axis value in tooltip with two separate arrays
- D3 Rect elements not displaying
- Can't see data in my D3 Graph
- Neo4j: Creating different kind of shapes for nodes
- Feeding data into database with Php form and using that data into JSON format to be used in D3
- D3.js grouped bar chart
- NVD3 - How to add arrow heads to the links using angular-nvd3
- How to use an arrow marker on an SVG <line> element?
- Create a dynamic JSON with a plsql procedure for a tree diagram
- Locations of Elements in the DOM
- Create nodes based on content BBox and get width of source node when adding links in force layout
- Line chart Dot update issue in D3
- customizing d3.js brush as slider
- d3.js dealing with non-svg browsers
- rendering d3-timeseries on d3-plunker
- CoffeeScript methods as D3js callbacks
- Customize tooltip of donut chart in dimple.js
- Import a package as an extension of another package with ES6 syntax
- How can i set each text label vertically in d3?
- D3 Force directed Graph: Why don't the links appear and why is the simulation on the left?
- Chart in d3js not showing up in react app
- How to add link name on the line d3.js?
- D3 adding element to zoomed map
- d3.js(maps) svg elements not appearing when adding them on top of existing svg elements
- D3 Getting values from keys using array of objects
- Detecting visible nodes in d3.js force layout after zoom-pan
- Difference between classed() and attr("class")