Here's a series of lines that is being created using d3 for loop where the number of instances is manually defined. Suppose I have a external data with some n number of rows. And i want to create lines for those many rows.
Lines created using for loop :
var height = 200;
var width = 1000;
var count = 50, padding = 11;
var svgContianer = d3.select(".spectrum")
.append("svg")
.attr("class", "g")
.attr("width", width)
.attr("height", height)
for(var i = 0; i < count; ++i) {
var line = svgContianer.append("line")
.attr("x1", padding*i)
.attr("x2", padding*i)
.attr("y1", 90)
.attr("y2", 25)
.attr("stroke", "#555")
.attr("stroke-width", 10)
}
But when i use it like this. It's not working.
var height = 200;
var width = 1000;
var count = 50, padding = 11;
var svgContianer = d3.select(".spectrum")
.append("svg")
.attr("class", "g")
.attr("width", width)
.attr("height", height)
d3.csv("data2.csv", function(data, error) {
var line = svgContianer.selectAll("line")
.data(data)
.enter()
.append("line")
.attr("x1", padding*i)
.attr("x2", padding*i)
.attr("y1", 90)
.attr("y2", 25)
.attr("stroke", "#555")
.attr("stroke-width", 10)
.on("mouseover", movein)
.on("mouseout", moveout)
})
Some one help in creating lines for the number of rows in the external data.
FIDDLE
DATA :
time,count
00:12,1
00:45,1
01:14,1
01:30,1
01:57,1
02:21,1
02:44,1
02:50,1
03:13,1
03:41,1
03:59,1
04:10,1
04:23,1
04:45,1
04:59,1
05:01,1
05:17,1
05:48,1
06:00,1
06:11,1
06:23,1
06:31,1
06:47,1
07:12,1
07:29,1
07:41,1
07:58,1
It looks like the problem is that i is not defined in you piece of code.
What you can do is:
.attr("x1", function(d,i){return padding*i})
with:
d being the data attached to a single line (the element of the data array corresponding to the line)
i being the index of the element in the data array.
Related
Question: Is it possible for me to make each node individually, and then use the force layout to connect them? If not, how would I go about pre-placing the nodes? And if so, can I get some help with the syntax, please?
Context: I am new to D3, and am trying to make a force-directed graph for only five nodes as part of the landing page for an academic project. I am using this example and this example, and sort of want to make a combination of the two by putting my nodes in the arrays.
For example, could I do something like:
var w = 1300;
var h = 10000;
//An area for svg elements
var svgArea = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//All the node definitions
var nodeMain = svgArea.append("a")
.attr("height", 300)
.attr("width", 300)
.append("circle")
.attr("r", 300)
.attr("cx", 650)
.attr("cy", 700)
.attr("fill", "orange");
var nodeMedia = svgArea.append("a")
.attr("height", 200)
.attr("width", 200)
.append("circle")
.attr("r", 200)
.attr("cx", 250)
.attr("cy", 1150)
.attr("fill", "orange");
var nodeRef = svgArea.append("a")
.attr("height", 200)
.attr("width", 200)
.append("circle")
.attr("r", 200)
.attr("cx", 1050)
.attr("cy", 1150)
.attr("fill", "orange");
//Nodes for the visualization
var nodes = [nodeMain, nodeMedia, nodeRef];
//Connected using indices of the array
var edges = [{source: 1, target: 0}, {source: 2, target: 0}];
//Force-directed
var connect = d3.layout.force()
.size([w, h])
.gravity(1)
.distance(100)
.charge(-50);
connect.nodes(nodes).links(edges);
var orb = svgArea.selectAll(".node").data(nodes)
.enter().append("g")
.call(force.drag);
var link = svgArea.selectAll(".link").data(edges)
.enter()
.append("line")
.attr("class", "link");
connect.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.source.x})
.attr("y2", function(d) {return d.source.y});
orb.attr("transform", function(d){ return "translate(" + d.x + "," + d.y + ")";});
});
connect.start();
(And in the event I asked a really silly question, would anyone mind directing me to some D3 resources where I can learn more of the concepts/syntax without emulating/relying purely on examples?)
Thank you in advance, everyone!
I have made slight changes in your code snippet and added necessary comments. Share your queries if any.
var w = 500;
var h = 500;
//An area for svg elements
var svgArea = d3.select("body").append("svg")
.attr("width", w)
.attr("height", h);
//Nodes for the visualization
var nodes = [{
name: "Main",
x: 80,
y: 10
}, {
name: "Media",
x: 15,
y: 40
}, {
name: "Reference",
x: 60,
y: 60
}];
//Connected using indices of the array
var edges = [{
source: 1,
target: 0
}, {
source: 2,
target: 0
}];
//Force-directed
var connect = d3.layout.force()
.size([w, h])
.gravity(1)
.distance(150)
.charge(-200);
connect
.nodes(nodes)
.links(edges);
//Creating links
var link = svgArea.selectAll(".link")
.data(edges)
.enter()
.append("line")
.attr("class", "link")
.style("stroke", "black");
//Creating nodes
var orb = svgArea.selectAll(".node")
.data(nodes)
.enter()
.append("g")
.attr("class", "node");
orb.append("circle")
.attr("r", 10)
.style("fill", "orange");
//Adding Labels
orb.append("text")
.attr("dx", 12)
.attr("dy", ".35em")
.text(function(d) {
return d.name
});
//Adding images
orb.append("image")
.attr("xlink:href", "https://github.com/favicon.ico")
.attr("x", -10)
.attr("y", -10)
.attr("width", 20)
.attr("height", 20);
orb.on("click",function(d){
alert("clicked "+d.name);
});
connect.on("tick", function() {
//Updating the link positions during force simulation.
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
});
//Updating the node position during force simulation
orb.attr("transform", function(d) {
return "translate(" + d.x + "," + d.y + ")";
});
});
connect.start();
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
D3 has a rich documentation which is available here: GitHub
Fiddle: https://jsfiddle.net/gilsha/kv05y1hq/
If it's of any help I have the following Plunkers...
http://plnkr.co/edit/TiKKmvydqXNipe103juL?p=preview
http://plnkr.co/edit/ZSmvH05nnAD6cYZb0EM4?p=preview
The first one is to show/hide groups of elements when clicked on.
The second is to demonstrate drag/zoom.
Also the data is externalised into a json file and read in using...
d3.json("data.json", function(error, graph) {
This should enable you to reduce your node definitions down to one function.
I've tried the circle plot example as the following:
var x=20, y=20, r=50;
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 800)
.attr("height", 600);
sampleSVG.append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", r)
.attr("cx", x)
.attr("cy", y);
But I want to figure out how to plot without a loop a sequence of circles from an array like:
data = [
[10,20,30],
[20,30,15],
[30,10,25]
];
Maybe this example could help?
var data = [
[10,20,30],
[20,30,15],
[30,10,25]
];
var height = 300,
width = 500;
var svg = d3.select('body').append('svg')
.attr('height', height)
.attr('width', width)
.append('g')
.attr('transform', 'translate(30, 30)');
// Bind each nested array to a group element.
// This will create 3 group elements, each of which will hold 3 circles.
var circleRow = svg.selectAll('.row')
.data(data)
.enter().append('g')
.attr('transform', function(d, i) {
return 'translate(30,' + i * 60 + ')';
});
// For each group element 3 circle elements will be appended.
// This is done by binding each element in a nested array to a
// circle element.
circleRow.selectAll('.circle')
.data(function(d, i) { return data[i]; })
.enter().append('circle')
.attr('r', function(d) { return d; })
.attr('cx', function(d, i) { return i * 60; })
.attr('cy', 0);
Live Fiddle
I have a vertical-line which is drawn using d3. Suppose I want to repeat the line for a several number of times like a bar code. How do I do it?
I know that it has to be done using for but i don't have any clue on how to do it.
Suggestions will be very much helpful.
FIDDLE
Here's the code:
var height = 500;
var width = 500;
var svgContianer = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
var line = svgContianer.append("line")
.attr("x1", 20)
.attr("x2", 20)
.attr("y1", 100)
.attr("y2", 0)
.attr("stroke", "#000")
.attr("stroke-width", 2)
Thanks in advance.
If you want to create a bar code, the D3 way to do it would be to bind each line (element) with its width (data) and then using D3's enter phase to construct them.
Also, for bar-codes, you would also want to turn shape-rendering to crispEdges.
Demo.
var height = 500;
var width = 500;
var svgContianer = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
var line = svgContianer.selectAll("line")
.data([1, 2, 1, 3, 2, 1, 3, 2, 1, 3, 2, 4, 3, 1, 2, 2, 2, 1, 3, 2])
.enter()
.append("line")
.attr("x1", function (d, i) {
return 20 + 5 * i;
})
.attr("x2", function (d, i) {
return 20 + 5 * i;
})
.attr("y1", 100)
.attr("y2", 0)
.attr("stroke", "#000")
.attr("stroke-width", function (d) {
return d;
})
There are better options than using a for loop. But, in any case here you go
var height = 500;
var width = 500;
var count = 10, padding = 5;
var svgContianer = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height)
for(var i = 0; i < count; ++i) {
var line = svgContianer.append("line")
.attr("x1", padding*i)
.attr("x2", padding*i)
.attr("y1", 100)
.attr("y2", 0)
.attr("stroke", "#000")
.attr("stroke-width", 2)
}
I'm pretty new to d3 and have been following this tutorial: http://christopheviau.com/d3_tutorial/
I'm stuck on the 'Binding Data' example - it's pretty simple but the code just won't produce anything. I've poked around here and haven't found the question listed so I thought I'd ask away.
Here's the code:
var dataset = [],
i = 0;
for(i = 0; i < 5; i++) {
dataset.push(Math.round(Math.random() * 100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 75);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("height", 40)
.attr("width", 75)
.attr("x", function (d, i) {
return i * 80
})
.attr("y", 20);
Other examples on the site work fine.
Thanks in advance - any ideas would be appreciated.
Unfortunately the code listed in the tutorial is incorrect. The svg element "circle" is specified by three attributes, "cx", x-axis coordinate of the center of the circle, "cy", y-axis coordinate of the center of the circle, and "r", the radius of the circle. I got this information from the w3 specification for an SVG circle.
I would recommend inspecting the JavaScript in the tutorial page to help iron out any other inconsistencies. Here it is:
<script type="text/javascript">
var dataset = [],
i = 0;
for(i=0; i<5; i++){
dataset.push(Math.round(Math.random()*100));
}
var sampleSVG = d3.select("#viz5")
.append("svg")
.attr("width", 400)
.attr("height", 100);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "gray")
.style("fill", "white")
.attr("r", 40)
.attr("cx", function(d, i){return i*80+40})
.attr("cy", 50)
.on("mouseover", function(){d3.select(this).style("fill", "aliceblue");})
.on("mouseout", function(){d3.select(this).style("fill", "white");})
.on("mousedown", animateFirstStep);
function animateFirstStep(){
d3.select(this)
.transition()
.delay(0)
.duration(1000)
.attr("r", 10)
.each("end", animateSecondStep);
};
function animateSecondStep(){
d3.select(this)
.transition()
.duration(1000)
.attr("r", 40);
};
</script>
I also created a JSFiddle which you can utilize to get the basic idea that the author of the tutorial is trying to convey, with respect to utilizing d3.js data, here.
svg circles use cx, cy, and r - not x, y, height, and width. I've correct the example code below:
var dataset = [];
for(var i = 0; i < 5; i++) {
dataset.push(Math.round(Math.random() * 100));
}
var sampleSVG = d3.select("#viz")
.append("svg")
.attr("width", 400)
.attr("height", 400);
sampleSVG.selectAll("circle")
.data(dataset)
.enter().append("circle")
.style("stroke", "black")
.attr("r", 10)
.attr("cx", function (d, i) {
return i * 80 + 10;
})
.attr("cy", function (d, i) {
return d;
});
http://jsfiddle.net/q3P4v/7/
MDN on svg circles: https://developer.mozilla.org/en-US/docs/SVG/Element/circle
var w = 725;
var h = 500;
var padding = 20;
var svgcanvas = divElem.append("svg:svg")
.attr("width", w)
.attr("height", h);
The path that I wish to restrict the region to, but the element has disappeared
svgcanvas.append("svg:clipPath")
.attr("id", "clipper")
.attr("d","M -200,0 A200,200 0 0,0 500,0 L -200,0")
.attr("transform", "translate(220,400) scale(1, -1)")
.style("stroke-width", 2)
.style("stroke", "steelblue")
.style("fill", "yellow");
Do not wish the line to go beyond this path but the element has disappeared
var myLine = svgcanvas.append("svg:line")
.attr("x1", 40)
.attr("y1", 50)
.attr("x2", 450)
.attr("y2", 150)
.attr("clip-path", "url(#clipper)")
.style("stroke", "rgb(6,120,155)");
Do not wish the Circles to go beyond this path, but element has disappeared
var circle = svgcanvas.selectAll("circle").data(jsoncirclehigh);
circle.enter().append('circle')
.attr('opacity',0)
.attr("cursor","pointer")
.on("mouseover", function(){d3.select(this).style("fill", "red");})
.on("mouseout", function() {d3.select(this).style("fill", "orange");})
.attr("clip-path", "url(#clipper)")
.attr("cx", function(d) {return d.cx;})
.attr("cy", function(d) {return d.cy;});
Look at this example, I apply a ClipPath and a line with a setInterval:
demo