We Keep Coding

Drag and Drop in multiple SVG canvas

I'm a newbie here in coding world. I was playing with D3 and have a problem in drag-and-dropping circles in multiple SVG canvases. The circle won't drag after the first move in the first canvas. Moreover, the circles in other canvases are draggable but they changes in the unexpected manner. Could any of you take a look at this? Thank you much in advance. The following is the code:
svg_1 = d3.select("#svg1")
.attr("width", 150)
.attr("height", 150)
.style("background", "pink");
svg_2 = d3.select("#svg2")
.attr("width", 150)
.attr("height", 150)
.style("background", "pink");
svg_3 = d3.select("#svg3")
.attr("width", 150)
.attr("height", 150)
.style("background", "pink");
svg_4 = d3.select("#svg4")
.attr("width", 150)
.attr("height", 150)
.style("background", "pink");
var initial = [{x:25, y:100}, {x:50, y:30}]
svg_1.selectAll("circle")
.data(initial)
.enter()
.append("circle")
.attr("cx", function (d) { return d.x })
.attr("cy", function (d) { return d.y })
.classed("linear_control", true)
.attr("r", 4)
.call(d3.drag().on("drag", dragged))
svg_2.selectAll("circle")
.data(initial)
.enter()
.append("circle")
.attr("cx", function (d) { return d.x })
.attr("cy", function (d) { return d.y })
.classed("linear_control", true)
.attr("r", 4)
.call(d3.drag().on("drag", dragged))
svg_3.selectAll("circle")
.data(initial)
.enter()
.append("circle")
.attr("cx", function (d) { return d.x })
.attr("cy", function (d) { return d.y })
.classed("linear_control", true)
.attr("r", 4)
.call(d3.drag().on("drag", dragged))
svg_4.selectAll("circle")
.data(initial)
.enter()
.append("circle")
.attr("cx", function (d) { return d.x })
.attr("cy", function (d) { return d.y })
.classed("linear_control", true)
.attr("r", 4)
.call(d3.drag().on("drag", dragged))
function dragged(d)
{
d3.select(this)
.attr("cx", d.x = d3.event.x)
.attr("cy", d.y = d3.event.y)
}
dragged.d3.select(this)

How to add half circle in D3 based on function arguments?

The basic example of my question builds on this chart. The goal is to fill only half the circle with the group color.
This SO question explains how to make half circles.
Here's a snippet of the original code
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
Here`s adding a half circle
var grad = svg.append("defs").append("linearGradient").attr("id", "grad")
.attr("x1", "0%").attr("x2", "0%").attr("y1", "100%").attr("y2", "0%");
grad.append("stop").attr("offset", "50%").style("stop-color", "lightblue");
grad.append("stop").attr("offset", "50%").style("stop-color", "white");
var node = svg.append("g")
.attr("class", "nodes")
.selectAll("circle")
.data(graph.nodes)
.enter().append("circle")
.attr("r", 5)
.attr("fill", function(d) { return color(d.group); })
.call(d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended));
enter code here
How could I make this grad dependent on the d.group?
I tried
A get_grad() function and have it return the grad
A set_grad() function and have it set the fill attribute
However, I didn't manage to get either working. Who can help me?

If you want to have different elements with different gradients, you have to use the same data binding process to create the gradients themselves:
var defs = svg.append("defs")
.selectAll("foo")
.data(data)
.enter()
.append("linearGradient")
//etc...
Have in mind that IDs have to be unique. In the following demo I'm doing:
.attr("id", function(d) {
return "grad" + d
})
... to create unique IDs.
In the demo, this is the part that you probably are interested in:
defs.append("stop")
.attr("offset", "50%")
.style("stop-color", function(d) {
return colours(d)
})
As you can see, I'm applying the stop colours based on data.
Have a look at the demo (which is not a force directed chart, but simply a demo with elements using different gradients):
var svg = d3.select("svg");
var colours = d3.scaleOrdinal(d3.schemeCategory10);
var defs = svg.append("defs")
.selectAll("foo")
.data(d3.range(5))
.enter()
.append("linearGradient")
.attr("id", function(d) {
return "grad" + d
})
.attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "100%")
.attr("y2", "0%");
defs.append("stop")
.attr("offset", "50%")
.style("stop-color", function(d) {
return colours(d)
})
defs.append("stop")
.attr("offset", "50%")
.style("stop-color", "white");
var circles = svg.selectAll("foo")
.data(d3.range(5))
.enter()
.append("circle")
.attr("cy", 50)
.attr("cx", function(d) {
return 25 + d * 62
})
.attr("r", 25)
.attr("stroke", "dimgray")
.attr("fill", function(d) {
return "url(#grad" + d + ")"
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>
You can also play with the offsets:
var svg = d3.select("svg");
var colours = d3.scaleOrdinal(d3.schemeCategory10);
var defs = svg.append("defs")
.selectAll("foo")
.data(d3.range(5))
.enter()
.append("linearGradient")
.attr("id", function(d) {
return "grad" + d
})
.attr("x1", "0%")
.attr("x2", "0%")
.attr("y1", "100%")
.attr("y2", "0%");
defs.append("stop")
.attr("offset", function(d) {
return 20 + d * 15 + "%"
})
.style("stop-color", function(d) {
return colours(d)
})
defs.append("stop")
.attr("offset", function(d) {
return 20 + d * 15 + "%"
})
.style("stop-color", "white");
var circles = svg.selectAll("foo")
.data(d3.range(5))
.enter()
.append("circle")
.attr("cy", 50)
.attr("cx", function(d) {
return 25 + d * 62
})
.attr("r", 25)
.attr("stroke", "dimgray")
.attr("fill", function(d) {
return "url(#grad" + d + ")"
})
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg></svg>

Binding data to new elements in d3

I am working with a d3 scatterplot. I connect to my database and initially I begin with lets say 3 dots on the graph. Each dot represents a paper and the x axis is the year and the y axis is how many citations it has. Now when I click on a dot, papers that that paper cites appear on the graph. I have managed all of the above so far but my issue now is that although when I click on dot the relevant papers appear on the graph, when I click on THOSE dots nothing happens. So I havent managed to bind my Json data to the new dots. Here is the relevant code:
// initial connection to display papers
d3.json("connection4.php", function(error,dataJson) {
dataJson.forEach(function(d) {
d.YEAR = +d.YEAR;
d.counter = +d.counter;
console.log(d);
})
//baseData is the original data that I dont want to be replaced
baseData = dataJson;
// draw dots
var g = svg.selectAll(".dot")
.data(baseData)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {return x(YearFn(d))})
.attr("cy", function(d) {return y(Num_citationsFn(d))})
.style("fill","blue")
.on("click", function(d, i) {
d3.json("connection2.php?paperID="+d.ID, function(error, dataJson) {
console.log(dataJson);
dataJson.forEach(function(d) {
d.YEAR = +d.YEAR;
d.counter = +d.counter;
console.log(d);
baseData.push(d);
})
var g = svg.selectAll(".dot")
.data(baseData)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {return x(YearFn(d))})
.attr("cy", function(d) {return y(Num_citationsFn(d))})
.style("fill", "red")
})
My queries in the php file are fine as I can see they are returning the correct data, so I think my main issue is binding my Json data from my second connection to the new dots. I wonder can anyone shed some light on how I need to go about this. I am new to d3 so any feedback is appreciated! thanks in advance

I think the problem is very simply that you do not bind the "click" event to your newly created nodes.
Replace the lines
// draw dots
var g = svg.selectAll(".dot")
.data(baseData)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {return x(YearFn(d))})
.attr("cy", function(d) {return y(Num_citationsFn(d))})
.style("fill","blue")
.on("click", function(d, i) {
...
})
by
function clickHandler (d,i){
...
}
// draw dots
var g = svg.selectAll(".dot")
.data(baseData)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {return x(YearFn(d))})
.attr("cy", function(d) {return y(Num_citationsFn(d))})
.style("fill","blue")
.on("click", clickHandler); //clickHandler is referenced here, instead of the original anonymous function
and add also a .on("click", clickHandler); call to your newly created node, i.e. within the clickHandler function itself:
///add linked dots
var g = svg.selectAll(".dot")
.data(baseData)
.enter()
.append("circle")
.attr("class", "dot")
.attr("r", 3.5)
.attr("cx", function(d) {return x(YearFn(d))})
.attr("cy", function(d) {return y(Num_citationsFn(d))})
.style("fill", "red")
.on("click", clickHandler); //click handler is *also* called here

D3.js line chart - positioning the dots

I'm having problems positioning my tooltip dots. I'm using an ordinal X scale and i just can't get it to work...not sure if i have to change my data structure or...any insight would be appreciated. I have included a JS FIDDLE link below
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { /* return x(d) ?? */})
.attr("cy", function(d,i) { /* return y(d) ?? */})
JS Fiddle link

If you want to create the tooltip for all the lines you'll need this
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { return x(d.month) })
.attr("cy", function(d,i) { return y(d.undecided) })
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { return x(d.month) })
.attr("cy", function(d,i) { return y(d.yes) })
tooltip_container.selectAll("dot")
.data(dataset)
.enter().append("circle")
.attr("r", 5)
.attr("cx", function(d,i) { return x(d.month) })
.attr("cy", function(d,i) { return y(d.no) })

D3: Attach text to circle such that it has same priority as circle object

I am able to add text to my sketch, but I would like it if I could make my text attached directly to the circle. This means that if a circle gets over-written by another circle, the text will as well. On a higher level not, I am finding the d3 model hard for constructing objects in a way that makes them composable with different shapes, etc. The code seems very procedural to mean so any tips would be greatly appeciated :)
JSFiddle link
var link = "https://api.github.com/orgs/csci-4830-002-2014/repos"
d3.json(link, function(error, data) {
var w = 10000;
var h = 1000;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", 5)
.attr("y1", 5)
.attr("x2", function (d,i){
return 30*d.forks_count;
})
.attr("y2", function (d,i){
return 30*d.open_issues_count;
})
.attr("stroke-width", 2)
.attr("stroke", "black");
svg.selectAll("circle")
.data(data)
.enter()
.append("circle")
.attr("r", 40)
.attr("cx", function(d){ return 30*d.forks_count; })
.attr("cy", function(d){ return 30*d.open_issues_count; })
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "white")
svg.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("dx", function(d,i){ return 30*d.forks_count; })
.attr("dy", function(d,i){ return 30*d.open_issues_count; })
.text(function(d){
if (d.name.indexOf("challenge") != -1)
return "C";
else
return "H";
});
});

With the way your code written right now, all the lines will be added first, then all the circles, and finally the texts. SVG will always put elements added later on top. So to achieve what you want, you will need to group them up. To do this, you will need to add a g element for each element of your data
var element = svg.selectAll(".element")
.data(data)
.enter()
.append("g")
.attr("class","element");
Now you can add the line, circle, and text to it
element.append("line")
.attr("x1", 5)
.attr("y1", 5)
.attr("x2", function (d, i) {
return 30 * d.forks_count;
})
.attr("y2", function (d, i) {
return 30 * d.open_issues_count;
})
.attr("stroke-width", 2)
.attr("stroke", "black");
element.append("circle")
.attr("r", 30)
.attr("cx", function (d) {
return 30 * d.forks_count;
})
.attr("cy", function (d) {
return 30 * d.open_issues_count;
})
.attr("stroke", "black")
.attr("stroke-width", 2)
.attr("fill", "white")
element
.append("text")
.attr("dx", function (d, i) {
return 30 * d.forks_count;
})
.attr("dy", function (d, i) {
return 30 * d.open_issues_count+6;
})
.style("text-anchor", "middle")
.text(function (d) {
if (d.name.indexOf("challenge") != -1) return "C";
else return "H";
});
You can check the updated JSFiddle at http://jsfiddle.net/9tp1yun7/2/