D3.JS - how do I add gridlines to my pie chart - d3.js

I have extended the pie-chart example at:
with pies that vary in radius depending on a percentage. I would like to add gridlines (circles) every 20 percent, but I can't figure out how.
here is the updated csv:
age,population,percent
<5,2704659,67
5-13,4499890,38
14-17,2159981,91
18-24,3853788,49
25-44,14106543,71
45-64,8819342,88
=65,612463,64
and here is the updated code with pie-parts of different radius:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
background: #333;
}
.arc path {
stroke: #fff;
stroke-width: 2px;
}
.arc grid {
stroke: #fff;
stroke-width: 1;
stroke-dasharray: 5,5;
}
.arc text {
fill:#fff;
font-size:12px;
font-weight:bold;
}
.arc line {
stroke: #fff;
}
</style>
<body>
<script src="d3.js"></script>
<script>
var width = 960,
height = 500,
radius = Math.min(width, height) / 2 - 10;
var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
var arc = d3.svg.arc()
.outerRadius(function(d) { return 50 + (radius - 50) * d.data.percent / 100; })
.innerRadius(20);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) { return d.population; });
var grid = d3.svg.area.radial()
.radius(150);
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
d3.csv("data.csv", function(error, data) {
data.forEach(function(d) {
d.population = +d.population;
d.percent = d.percent;
});
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d) { return color(d.data.age); });
g.append("text")
.attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
.attr("dy", ".35em")
.style("text-anchor", "middle")
.text(function(d) { return d.data.age; });
});
</script>


First set the number of ticks:
var numTicks = 5; // Each tick is 20%
Then create the data to create the gridlines:
var sdat = [];
for (i=0; i<=numTicks; i++) {
sdat[i] = (radius/numTicks) * i;
}
And then you can use a function to create the radial gridlines, and you can call it from within the d3.csv block:
addCircleAxes = function() {
var circleAxes, i;
svg.selectAll('.circle-ticks').remove();
circleAxes = svg.selectAll('.circle-ticks')
.data(sdat)
.enter().append('svg:g')
.attr("class", "circle-ticks");
// radial tick lines
circleAxes.append("svg:circle")
.attr("r", String)
.attr("class", "circle")
.style("stroke", "#CCC")
.style("opacity", 0.5)
.style("fill", "none");
// Labels for each circle
circleAxes.append("svg:text")
.attr("text-anchor", "center")
.attr("dy", function(d) { return d - 5 })
.style("fill", "#fff")
.text(function(d,i) { return i * (100/numTicks) });
};
An example is here: http://bl.ocks.org/3994129
(Borrowed from: http://kreese.net/blog/2012/08/26/d3-js-creating-a-polar-area-diagram-radial-bar-chart/)

Related

How to convert D3js V2 to V4?

I tried to migrate D3js V2 to V4 of below example:
https://jasonneylon.wordpress.com/2013/09/05/two-sided-horizontal-barchart-using-d3-js/
But getting error while migrating:
Error: attribute y: Expected length, "NaN".
at line no 201:
.attr("y", function(d, z){ return y(z) + y.bandwidth()/2; } )
and
line no 223:
.attr("y", function(d){ return y(d) + y.bandwidth()/2; }
Please advice.
<!DOCTYPE html>
<html>
<head>
<title>Bar Chart</title>
<script src="http://d3js.org/d3.v4.js"></script>
<style type="text/css">
.chart {
background: #00ccff;
margin: 10px;
padding-top: 10px;
}
.chart .right {
stroke: white;
fill: indianred;
}
.chart .left {
stroke: white;
fill: steelblue;
}
.chart rect:hover {
fill: #64707d;
}
.chart text {
fill: white;
}
.chart text.name {
fill: black;
}
</style>
</head>
<body>
<h1>Two sided horiztontal bar chart</h1>
<script type="text/javascript">
var randomNumbers = function() {
var numbers = [];
for (var i = 0; i < 20; i++) {
numbers.push(parseInt(Math.random() * 19) + 1);
}
return numbers;
};
var randomNames = function() {
var names = [];
for (var i = 0; i < 20; i++) {
names.push(String.fromCharCode(65 + Math.random() * 25) + String.fromCharCode(65 + Math.random() * 25) + String.fromCharCode(65 + Math.random() * 25));
}
return names;
};
var names = randomNames();
var leftData = randomNumbers();
var rightData = randomNumbers();
for (var i= 0; i< names.length; i++) {
console.log(names[i] + " from: " + leftData[i] + " to: " + rightData[i]);
}
var labelArea = 160;
var chart,
width = 400,
bar_height = 20,
height = bar_height * (names.length);
var rightOffset = width + labelArea;
var chart = d3.select("body")
.append('svg')
.attr('class', 'chart')
.attr('width', labelArea + width + width)
.attr('height', height);
var xFrom = d3.scaleLinear()
.domain([0, d3.max(leftData)])
.range([0, width]);
var y = d3.scaleBand()
.domain(names)
.rangeRound([10, height]);
console.log('Y Range: '+y.range());
console.log('y.bandwidth(): '+y.bandwidth()); // 33
var yPosByIndex = function(d, index){ return y(index); }
chart.selectAll("rect.left")
.data(leftData)
.enter().append("rect")
.attr("x", function(pos) { return width - xFrom(pos); })
.attr("y", yPosByIndex)
.attr("class", "left")
.attr("width", xFrom)
.attr("height", y.bandwidth());
chart.selectAll("text.leftscore")
.data(leftData)
.enter().append("text")
.attr("x", function(d) { return width - xFrom(d); })
.attr("y", function(d, z){ return y(z) + y.bandwidth()/2; } )
.attr("dx", "20")
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'leftscore')
.text(String);
chart.selectAll("text.name")
.data(names)
.enter().append("text")
.attr("x", (labelArea / 2) + width)
.attr("y", function(d){ return y(d) + y.bandwidth()/2; } )
.attr("dy", ".20em")
.attr("text-anchor", "middle")
.attr('class', 'name')
.text(String);
var xTo = d3.scaleLinear()
.domain([0, d3.max(rightData)])
.range([0, width]);
chart.selectAll("rect.right")
.data(rightData)
.enter().append("rect")
.attr("x", rightOffset)
.attr("y", yPosByIndex)
.attr("class", "right")
.attr("width", xTo)
.attr("height", y.bandwidth());
chart.selectAll("text.score")
.data(rightData)
.enter().append("text")
.attr("x", function(d) { return xTo(d) + rightOffset; })
.attr("y", function(d,z){ console.log(y(z)); return y(z) + y.bandwidth()/2; } )
.attr("dx", -5)
.attr("dy", ".36em")
.attr("text-anchor", "end")
.attr('class', 'score')
.text(String);
</script>
</body>
</html>

You call console.log(y(z)); and you get 40 undefined. And you don't investigate why?
What is the domain of y? Strings
So if you give it a number it most likely gives you a wrong answer.
The same reason why your function
var yPosByIndex = function(d, index){ return y(index); }
is wrong.
The main reason you have all these problems is that you have multiple arrays of information that are related based on the index. Create 1 array with objects that contain all the related data.
var data = d3.range(20).map(i => { return {name: randomName(), left:randomNumber(), right:randomNumber()}; } );
Now adjust your program to use d.name, d.left, d.right.
Don't use parseInt if you want to calculate the integer part of a number, it is slow and unclear what you want, use Math.floor()
Better to use the same xScale for the left and right bars. Why should a bar with value 10 be smaller on one of the sides?

exit().remove() is not removing the first bar

Whenever the slider is dragged and a new date is selected it does not redraw the first bar, it redraws all the other bars. For example, try date 09/06 and then 09/17. The first bar for id 54042 will not redraw. This is the link to my bl.ocks http://blockbuilder.org/fall16mis/87a39bc00b1b356f78dfd0954f345444
This is the code:
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
.tooltip {
opacity: 0;
background-color: #ffe047;
position: absolute;
}
.grid line {
stroke: lightgrey;
shape-rendering: crispEdges;
}
.ticks {
font-size: 11px;
}
.track,
.track-inset,
.track-overlay {
stroke-linecap: round;
}
.track {
stroke: #000;
stroke-opacity: 0.3;
stroke-width: 10px;
}
.track-inset {
stroke: #ddd;
stroke-width: 8px;
}
.track-overlay {
pointer-events: stroke;
stroke-width: 50px;
stroke: transparent;
cursor: crosshair;
}
.handle {
fill: #fff;
stroke: #000;
stroke-opacity: 0.5;
stroke-width: 1.25px;
}
.bar:hover{
fill:#0f9fff;
}
.legend{
color:#005ebc;
z-index:0;
}
</style>
</head>
<body>
<div id="slider"></div>
<script>
var json_data = "id,date,start_time,end_time\n\
54042,2017/09/06,5.50,5.53\n\
54042,2017/09/06,7.55,9.19\n\
54042,2017/09/16,11.12,12.28\n\
54042,2017/09/23,13.56,15.03\n\
54042,2017/09/07,16.29,17.33\n\
54042,2017/09/06,19.56,20.53\n\
54042,2017/09/20,21.3,22.14\n\
98765,2017/09/06,5.1,6.51\n\
98765,2017/09/06,11.4,11.53\n\
98765,2017/09/06,12.2,12.42\n\
98765,2017/09/06,12.55,14.2\n\
98765,2017/09/16,21.42,21.59\n\
98765,2017/09/16,22.01,23.13\n\
98765,2017/09/16,23.16,23.51\n\
98765,2017/09/23,13.41,14.03\n\
65299,2017/09/06,7.23,8.21\n\
65299,2017/09/06,9.37,10.23\n\
65299,2017/09/06,11.46,13.29\n\
65299,2017/09/06,18.07,19.57\n\
65299,2017/09/17,14.41,16.22\n\
65299,2017/09/17,21.39,23.39\n\
79408,2017/09/06,9.37,10.17\n\
79408,2017/09/06,11.03,12.08\n\
79408,2017/09/06,13.14,15.53\n\
79408,2017/09/06,16.05,17.48\n\
79408,2017/09/06,19.47,20.23\n\
38338,2017/09/06,8.22,9.28\n\
38338,2017/09/06,11.34,12.17\n\
38338,2017/09/07,12.43,13.35\n\
38338,2017/09/07,14.12,15.48\n\
38338,2017/09/07,16.09,17.23\n\
38338,2017/09/07,18.31,19.19\n\
38338,2017/09/07,21.49,23.26\n\
81757,2017/09/06,6.31,7.41\n\
81757,2017/09/06,8.18,9.39\n\
81757,2017/09/06,10.18,11.23\n\
81757,2017/09/06,13.02,14.04\n\
81757,2017/09/07,15.22,17.23\n\
81757,2017/09/07,20.32,22.01\n\
68077,2017/09/06,11.1,12.45\n\
68077,2017/09/06,15.23,16.54\n\
68077,2017/09/06,17.31,19.05\n\
68077,2017/09/06,20.39,21.3\n\
68077,2017/09/06,21.41,22.37\n\
58381,2017/09/06,16.51,17.55\n\
58381,2017/09/06,19.34,20.55\n\
58381,2017/09/06,21.33,22.51\n\
58381,2017/09/07,14.46,16.15\n\
37500,2017/09/06,8.2,10.18\n\
37500,2017/09/06,11.37,13.34\n\
37500,2017/09/06,19.22,20.16\n\
37500,2017/09/06,21.55,22.09\n\
37500,2017/09/16,14.16,16.26\n\
37500,2017/09/16,16.58,17.48\n\
39146,2017/09/06,19.47,20.21\n\
39146,2017/09/06,20.35,21.29\n\
39146,2017/09/06,22.01,23.25\n\
39146,2017/09/16,8.03,9.56\n\
39146,2017/09/16,10.23,12.52\n\
39146,2017/09/16,13.25,14.28";
window.data = d3.csvParse(json_data, function(d){ return {
id:d.id,
date:d.date,
start_time:+d.start_time,
end_time:+d.end_time}; });
window.minDate = d3.min(window.data,function(d){ return d.date; });
window.maxDate = d3.max(window.data,function(d){ return d.date; });
window.names = window.data.map(function(d){
return d.id; });
var parseDate = d3.timeParse("%Y/%m/%d");
var displayDate = d3.timeFormat("%m/%d");
var forChartDate = d3.timeFormat("%Y/%m/%d");
var height = 500;
var width = 800;
var margin = {left: 50, right: 20, bottom: 0, top: 70};
var tooltip = d3.select("body").append("div").attr("class", "tooltip")
var svg = d3.select("body").append("svg").attr("height","1000px").attr("width","100%");
var chartGroup = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");
var legend = svg.append("g").attr("transform","translate("+margin.left+","+(margin.top+10)+")");
var chartDate = window.minDate;
var displaySlider = function(data){
window.x = d3.scaleLinear()
.domain([0, 24])
.range([0, width]);
window.y = d3.scaleBand()
.domain(window.names)
.rangeRound([height, 0])
.paddingInner(0.3);
function make_y_gridlines() {
return d3.axisLeft(y)
};
function make_x_gridlines() {
return d3.axisBottom(x)
};
chartGroup.append("g")
.attr("class","axis y")
.call(d3.axisLeft(y))
chartGroup.append("g")
.attr("class","axis x")
.call(d3.axisBottom(x))
.attr("transform","translate(0,"+height+")")
.call(d3.axisBottom(x)
.ticks(24));
chartGroup.append("g")
.attr("class", "grid")
.call(make_y_gridlines()
.tickSize(-width)
.tickFormat("")
);
chartGroup.append("g")
.attr("class", "grid")
.call(make_x_gridlines()
.tickSize(height)
.tickFormat("")
)
var newData = data.filter(function(d){
return d.date==chartDate;
})
displayBar(newData);
var x1 = d3.scaleTime()
.range([0, width])
.domain([parseDate(minDate), parseDate(maxDate)])
.clamp(true);
var slider = svg.append("g")
.attr("class", "slider")
.attr("transform", "translate(" + margin.left + ",30)");
slider.append("line")
.attr("class", "track")
.attr("x1", x1.range()[0])
.attr("x2", x1.range()[1])
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-inset")
.select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
.attr("class", "track-overlay")
.call(d3.drag()
.on("start.interrupt", function() { slider.interrupt(); })
.on("drag end", function() { sliderFunc(x1.invert(d3.event.x)); }));
slider.insert("g", ".track-overlay")
.attr("class", "ticks")
.attr("transform", "translate(0," + 10 + ")")
.selectAll("text")
.data(x1.ticks(15))
.enter()
.append("text")
.attr("x", x1)
.attr("y", 10)
.attr("text-anchor", "middle")
.text(function(d) { return displayDate(d); });
var label = slider.append("text")
.attr("class", "label")
.attr("text-anchor", "middle")
.text(minDate)
.attr("transform", "translate(0," + (-10) + ")");
var handle = slider.insert("circle", ".track-overlay")
.attr("class", "handle")
.attr("r", 7);
function sliderFunc(h) {
handle.attr("cx", x1(h));
label.attr("x", x1(h))
.text(displayDate(h));
chartDate = forChartDate(h);
console.log(chartDate);
newData = data.filter(function(d){
return d.date==chartDate;
})
//displayText(newData);
displayBar(newData);
}
};
var displayBar = function(data){
var bars = chartGroup.selectAll(".bar")
.data(data, function(d){
console.log(d);
return d;
});
bars.exit().remove();
bar_enter = bars.enter().append("rect")
bar_enter.attr("class", "bar")
.attr("x", function(d) {
console.log(d.start_time);
return window.x(d.start_time); })
.attr("y", function(d) { return window.y(d.id); })
.attr("height", window.y.bandwidth())
.attr("fill", "green")
.transition()
.duration(600)
.attr("width", function(d) { return window.x(d.end_time-d.start_time); });
bar_enter.on('mousemove', function(d,i){
tooltip.style("opacity","1")
.style("left",(d3.event.pageX+10)+"px")
.style("top",d3.event.pageY+"px");
tooltip.html(" Start Time:"+d.start_time+" End Time:"+d.end_time);
})
bar_enter.on('mouseout', function(){
tooltip.style("opacity","0")
});
};
displaySlider(window.data);
</script>
</body>

You cannot use the whole object in the key function:
var bars = chartGroup.selectAll(".bar")
.data(data, function(d){
return d;
});
The API explains it:
key function may be specified to control which datum is assigned to which element, replacing the default join-by-index, by computing a string identifier for each datum and element. (emphasis mine)
Therefore, instead of using the whole object, use a property (like the id):
var bars = chartGroup.selectAll(".bar")
.data(data, function(d){
return d.id;
});
Here is the updated bl.ocks: https://bl.ocks.org/GerardoFurtado/57d014aa5124bdbe5774e1457816ff43/07a233d46aa3ae91bcffb8682de9ed8376c99b9a

How to add seperate lines to map

On a d3 v4 chart, I have arcs drawn for multiple coordinates. All is well there. Now I would like to draw the lines from a json request. Any new lines would be drawn, whilst existing lines would remain. As I understand, each line would require its own transition....
If I understand correctly, the iteration of coordinates begins at
line.attr("d", function(c) {...}
Which iterates over each set of coordinates, and then internally groups them so that they are all 'triggered' at the same time, as the one event. Any explanation on this gratefully received.
Plunker: https://plnkr.co/edit/Ax4Tby47lFlryzVWCHi2?p=preview
Kev

Not sure I'm reading your question correctly, but it sounds like you want your animations to start one after another. This can be accomplished with a .delay:
.attr("stroke-dasharray", "0, 1000") //<-- hide the line
.transition()
.delay(function(d, i) {
return 5000 * i; //<-- i is the index of the line, so stagger the animation start by index * duration
})
.duration(5000)
.attrTween("stroke-dasharray", function() {
var len = this.getTotalLength();
return function(t) {
return (d3.interpolateString("0," + len, len + ",0"))(t)
};
})
Full Code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<style>
.stroke {
fill: none;
stroke: #000;
stroke-width: 3px;
}
.fill{
fill: #fff;
}
.graticule {
fill: none;
stroke: #777;
stroke-width: 0.5px;
stroke-opacity: 0.5;
}
/* the color of land in countries */
.land {
fill: #222;
}
/* the color of borders */
.boundary {
fill: none;
stroke: #fff;
stroke-width: 0.5px;
}
</style>
<svg width="800" height="600"></svg>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//d3js.org/topojson.v1.min.js"></script>
<script>
var svg = d3.select("svg"),
width = +svg.attr("width"),
height = +svg.attr("height");
var projection = d3.geoMercator()
.scale((width - 3) / (2 * Math.PI))
.translate([width / 2, height / 2]);
var path = d3.geoPath()
.projection(projection);
var graticule = d3.geoGraticule();
svg.append("defs").append("path")
.datum({
type: "Sphere"
})
.attr("id", "sphere")
.attr("d", path);
svg.append("use")
.attr("class", "stroke")
.attr("xlink:href", "#sphere");
svg.append("use")
.attr("class", "fill")
.attr("xlink:href", "#sphere");
svg.append("path")
.datum(graticule)
.attr("class", "graticule")
.attr("d", path);
d3.json("https://rawgit.com/mbostock/topojson/master/examples/world-50m.json", function(error, world) {
if (error) throw error;
d3.json("https://jsonblob.com/api/5806b733e4b0bcac9f817223", function(coord){
svg.insert("path", ".graticule")
.datum(topojson.feature(world, world.objects.land))
.attr("class", "land")
.attr("d", path);
svg.insert("path", ".graticule")
.datum(topojson.mesh(world, world.objects.countries, function(a, b) {
return a !== b;
}))
.attr("class", "boundary")
.attr("d", path);
var line = svg.selectAll(".paths")
.data(coord)
.enter()
.append("path");
line.attr("d", function(c) {
console.log(c);
var d = {
source: projection(c.source),
target: projection(c.destination)
};
var dx = d.target[0] - d.source[0],
dy = d.target[1] - d.source[1],
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source[0] + "," + d.source[1] + "A" + dr + "," + dr +
" 0 0,1 " + d.target[0] + "," + d.target[1];
})
.style("stroke", "red") // color of the arc line
.style("stroke-width", 5)
.style("fill", "none")
.attr("stroke-dasharray", "0, 1000")
.transition()
.delay(function(d, i) {
return 5000 * i;
})
.duration(5000)
.attrTween("stroke-dasharray", function() {
var len = this.getTotalLength();
return function(t) {
return (d3.interpolateString("0," + len, len + ",0"))(t)
};
})
.on('end', function(d) {
var c = projection(d.destination);
svg.append('circle')
.attr('cx', c[0])
.attr('cy', c[1])
.attr('r', 0)
.style('fill', 'white') // color of the cirle
.style('fill-opacity', '0.5')
.transition()
.duration(2000)
.attr('r', 50)
.on('end', function(d) {
d3.select(this)
.transition()
.duration(2000)
.attr('r', 10);
});
});
});
});
</script>
</body>
</html>

d3 how to tween inner radius for pie chart

I need to animate pie chart into a donut chart (or ring chart).
Here is my code:
var arc = d3.svg.arc().outerRadius(radius-margin).innerRadius(0)
var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(60)
var path = pie_chart.selectAll('path')
.data(pie(data))
.enter()
.append('path')
.attr('d', arc)
.attr('fill', function(d, i) {
return color_scale(d.data.device)
})
.transition().attr('d', arc2)
Some times it's working but sometimes it is not. I have tried to apply transition to arc but not working.
var arc2 = d3.svg.arc().outerRadius(radius-margin).innerRadius(0).transition().innerRadius(60)

I would write my own arcTween function for this to take complete control of the transition:
function arcTween(d) {
var i = d3.interpolateNumber(0, radius-70); //<-- radius of 0 to donut
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r); //<-- create arc
return arc(d); //<-- return arc path
};
}
Full code:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 500,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [10, 20, 30, 40];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color(i);
})
.transition()
.delay(100)
.duration(5000)
.attrTween("d", arcTween);
function arcTween(d) {
var i = d3.interpolateNumber(0, radius-70);
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r);
return arc(d);
};
}
</script>
</body>
Or just give someone a headache:
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.arc text {
font: 10px sans-serif;
text-anchor: middle;
}
.arc path {
stroke: #fff;
}
</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>
var width = 500,
height = 500,
radius = Math.min(width, height) / 2;
var color = d3.scale.category10();
var arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(0);
var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
return d;
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
var data = [10, 20, 30, 40];
var g = svg.selectAll(".arc")
.data(pie(data))
.enter().append("g")
.attr("class", "arc");
var arcs = g.append("path")
.attr("d", arc)
.style("fill", function(d, i) {
return color(i);
});
(function repeat() {
arcs.transition()
.duration(500)
.attrTween("d", arcTweenOut)
.transition()
.duration(500)
.attrTween("d", arcTweenIn)
.each('end', repeat)
})();
function arcTweenOut(d) {
var i = d3.interpolateNumber(0, radius-70);
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r);
return arc(d);
};
}
function arcTweenIn(d) {
var i = d3.interpolateNumber(radius-70, 0);
return function(t) {
var r = i(t),
arc = d3.svg.arc()
.outerRadius(radius - 10)
.innerRadius(r);
return arc(d);
};
}
</script>
</body>

Draw curve line between nodes bugs in d3.js

I was trying to draw curves between two nodes using d3.js.
<meta charset="utf-8">
<!-- ----------------- -->
<!-- THIS PART IS CSS -->
<!-- ----------------- -->
<style>
body
{
background: lightskyblue;
}
.node {
stroke: black;
stroke-width: 4.0px;
}
.link {
stroke: slategray;
stroke-opacity: 0.6;
}
</style>
</head>
<body>
<!-- ------------------------ -->
<!-- THIS PART IS JAVASCRIPT -->
<!-- ------------------------ -->
<script src="d3.v3.js"></script>
<script>
////////////////////////////////////////////////////////////////
// Function to prepare topology background
////////////////////////////////////////////////////////////////
var width = 1280, height = 630;
var color = d3.scale.category20();
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
.style("border","7px solid black")
;
var nodes = [], links = [];
var graph = test_case();
nodes = graph.nodes;
links = graph.links;
for(var i = 0; i < nodes.length; i++)
{
element = nodes[i];
if(element.group == 0)
{
element.x = width/2;
element.y = height/2;
element.fixed = true;
}
}
var force = d3.layout.force()
.charge(-400)
.linkDistance(300)
.size([width, height])
.links(links)
.nodes(nodes)
.on("tick", tick);
var node = svg.selectAll(".node"),
link = svg.selectAll(".link");
drawGraph();
function test_case()
{
graph =
{
"nodes":[
{"name":0,"group":0,"pos":[216,140]},
{"name":1,"group":1,"pos":[350,200]},
{"name":2,"group":1,"pos":[478,438]},
{"name":3,"group":1,"pos":[596,498]},
{"name":4,"group":1,"pos":[422,295]},
{"name":5,"group":1,"pos":[597,357]},
{"name":6,"group":1,"pos":[530,238]},
{"name":7,"group":1,"pos":[506,100]},
{"name":8,"group":1,"pos":[793,265]},
{"name":9,"group":1,"pos":[972,228]}
],
"links":[
{"source":1,"target":2,"rssi":25,"lqi":25,"lr":120},
{"source":2,"target":0,"rssi":50,"lqi":50,"lr":80},
{"source":3,"target":0,"rssi":12,"lqi":12,"lr":200},
{"source":3,"target":2,"rssi":65,"lqi":65,"lr":40},
{"source":4,"target":0,"rssi":80,"lqi":80,"lr":170},
{"source":5,"target":0,"rssi":60,"lqi":60,"lr":110},
{"source":6,"target":7,"rssi":30,"lqi":30,"lr":64},
{"source":7,"target":0,"rssi":21,"lqi":21,"lr":97},
{"source":8,"target":3,"rssi":57,"lqi":57,"lr":190},
{"source":9,"target":0,"rssi":72,"lqi":72,"lr":12}
]
};
return graph;
}
////////////////////////////////////////////////////////////////
// Function to draw topology, including nodes and links
////////////////////////////////////////////////////////////////
function drawGraph()
{
//Add links
link = link.data(force.links());
link.enter()
.append("path")
// .insert("line", ".gnode")
.attr("class", "link")
// .style("stroke", function(d) {
// if(d.rssi<=25) return "crimson";
// else if(d.rssi<=50) return "orange";
// else if(d.rssi<=75) return "royalblue";
// else return "green"; })
//.style("stroke-dasharray" ,function(d) { if(d.target==0) return "10,10"; else return "";})
// .style("stroke-width", function(d) { return d.lqi/20 + 5; })
// .style("stroke-opacity", function(d) { return (d.lr/51)*0.1 + 0.5; });
link.exit().remove();
//Add nodes with texts in them
node = node.data(force.nodes());
node.enter().append("g").attr("class", "gnode").call(force.drag);
node.append("circle")
.attr("class", function(d) { return "node group" + d.group })
.attr("r", 25)
.style("fill", function(d) { if(d.group==0) return "mediumaquamarine"; else return "beige" });
node.append("text")
.attr("text-anchor", "middle")
.attr("dy", "+7")
.text(function(d) { return d.name; })
.attr("font-size", "22px")
.attr("font-weight", "bold")
.style("fill", "black");
node.exit().remove();
force.start();
}
function tick()
{
node.attr("transform", function(d) { return "translate(" + d.pos + ")";});
link.attr("d", function(d) {
var dx = d.target.pos[0] - d.source.pos[0],
dy = d.target.pos[1] - d.source.pos[1],
dr = Math.sqrt(dx * dx + dy * dy);
return "M" + d.source.pos[0] + "," + d.source.pos[1] + "A" + dr + "," + dr + " 0 0,1 " + d.target.pos[0] + "," + d.target.pos[1];
});
}
</script>
</body>
</html>
but the result of the code was not as I expected which was supposed to be like this http://bl.ocks.org/d3noob/5155181 with addition of colours, opacity and width. I also want to draw arrows. Could anybody figure this out please?
I'm sorry I'm very new to stackoverflow; it's my first time I have written this topic.

For adding arrow in path following steps:
Append Marker:
svg.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", 45)
.attr("refY",-5.2)
.attr("markerWidth", 6)
.attr("markerHeight", 6)
.attr("orient", "auto")
.append("svg:path")
.attr("d", "M0,-5L10,0L0,5");
Append arrow in Path
link = link.data(force.links());
link.enter()
.append("path")
.attr("class", "link")
.attr("marker-end", "url(#end)");
Path CSS:
.link {
stroke: slategray;
stroke-opacity: 0.6;
fill: none;
stroke-width: 1.5px;
}
DEMO for your code
According to radius you want to change the arrow position refer this ,and it will help for dragging nodes

First step:
Make fill none :)
.link {
stroke: slategray;
fill: none;
stroke-opacity: 0.6;
}
Working on the arrows
JSFIDDLE

Resources