i want zoom a dot chart like a line but each point are duplicated by zoom step.
g.updateCurve = function(_){
// Update the line path.
this.select(".line")
.attr("d", line);
// add each point
this.selectAll('.circle').data(data).enter().append("circle")
.attr("class", "dot")
.attr("cx", function(d) {return xScale (d.date); })
.attr("cy", function(d) {return yScale (d.ySpeed); })
.attr("r", function(d) {return rScale (d.xSpeed); });
return this;
};
how can I change for a proper zoom ?
I work on this JSFiddle
it need to costruct DOM.Circle.data before the update fonction:
g.selectAll('circle').data(data).enter().append("circle")
.attr("class", "dot");
and juste update .attr() on zoom event
// for update Attribute of line and Dots on ZoomEvent
g.updateCurve = function(){
// Update the line path.
this.select(".line")
.attr("d", line);
// add each point
this.selectAll('circle')
.attr("cx", function(d) {return xScale (d.date); })
.attr("cy", function(d) {return yScale (d.ySpeed); })
.attr("r", function(d) {return rScale (d.xSpeed); });
return this;
};
Working exemple on JSFiddle
Related
script type="text/javascript">
d3.csv("mydata.csv", function(data){
var svgcontainer = d3.select("body").append("svg")
.attr("width",500)
.attr("height",500)
svgcontainer.selectAll("rect")
.data(data)
.enter()
.append("rect")
.attr("width" ,function (d) { return d.age * 10;})
.attr("height" ,45)
.attr("y",function(d,i) { return i*50; })
.attr("fill","blue")
svgcontainer.selectAll("text")
.data(data)
.enter()
.append("text")
.attr("fill","white")
//.attr("y",function(d,i) { return i*50 ; })
.text( function (d) { return d.name; })
})
I have to append text in my d3.js code but it's not displaying text.I am new to d3.js so please any one help me. Here is my code-
From the first observation i will get to know the issue related with the text element position in svg. In SVG Coordinate positions are very important to achieve the graphical representation. In above code snippet x and y positions are missing. sample code below:-
svgcontainer.append("text")
.attr("x", function(d) { return x(d.value) - 3; })
.attr("y", barHeight / 2)
.attr("dy", ".35em")
.text(function(d) { return d.value; });
Example
Using this I was able to add names to the map: Add names of the states to a map in d3.js
Now, how do I rotate those text as it is overlapping with each other.
For those who are looking for the solution.
Adding this solved it. It produces composition matrix.
.attr('transform', function(d) {
return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+') rotate(-45);
})
Here is the updated code:
function draw(){
d3.json("readme.json", function(json) {
g.selectAll("path")
.data(json.features)
.enter()
.append("path")
.attr("d", path)
.on("click", click);
g.selectAll("text")
.data(json.features)
.enter()
.append("svg:text")
.text(function(d){
return d.properties.name;
})
// .attr("x", function(d){
// return path.centroid(d)[0];
// })
// .attr("y", function(d){
// return path.centroid(d)[1];
// })
.attr("text-anchor","middle")
.attr('font-size','6pt')
// added
.attr('transform', function(d) {
return 'translate('+path.centroid(d)[0]+','+path.centroid(d)[1]+') rotate(-45);
})
});
}
I wanted to draw a pulsating warbling circle on a geomap using d3, using this example for guidance. However—and I know this is a very basic question, so apologies—I can't seem to get the selector to fire right. Here is the relevant code:
layer2
.attr("id", "locations")
.selectAll(".state")
.data(columbia.features)
.enter().append("circle")
.attr("class", "location")
.attr("r", "4px")
.attr("cx", function(d) { return proj(d['geometry']['coordinates'])[0]; })
.attr("cy", function(d) { return proj(d['geometry']['coordinates'])[1]; })
.attr("d", path)
.each(pulse);
function pulse() {
var circle = svg.select(".location");
console.log(circle);
(function repeat() {
circle = circle.transition()
.duration(2000)
.attr("stroke-width", 20)
.attr("r", 10)
.transition()
.duration(2000)
.attr('stroke-width', 0.5)
.attr("r", 200)
.ease('sine')
.each("end", repeat);
})();
}
Right now I have:
var circle = svg.select(".location");
What should I have instead of .location?
Here is the full file.
Edit: got it; I need selectAll, notselect.
I have a line (& area) graph which works ok, when horizontal. But I really need it to be vertical, to stand up. I have tried all kinds of changes to the existing code. Mostly with some strange results.
Here’s the code (modified it a bit). Is there a way to change it to make the graph vertical?:
var x = d3.scale.linear().domain([1, itemCount]).range([0, width]);
var y = d3.scale.linear().domain([0, maxValue]).rangeRound([height, 0]);
// Set up linar x and y axis.
var xAxis = d3.svg.axis().scale(x).ticks(10);
var yAxis = d3.svg.axis().scale(y).ticks(2).orient("left");
// Line graph.
line = d3.svg.line()
.interpolate("basis")
.x(function (d) {
return x(d.x);
})
.y(function (d) {
return y(d.y);
});
// Create SVG element.
var svg = d3.select("body")
.append("svg")
.attr("width", width)
.attr("height", height);
// X-Axis, to bottom.
svg.append("svg:g")
.attr("class", "axis")
.attr("transform", "translate(1," + height + ")")
.call(xAxis);
//Y-Axis
svg.append("svg:g")
.attr("class", "axis")
.attr("transform", "translate(40, 1)")
.call(yAxis);
// Horizontal axis guide lines.
svg.selectAll("line.y")
.data(y.ticks(5))
.enter()
.append("line")
.attr("x1", 0)
.attr("x2", width)
.attr("y1", y)
.attr("y2", y)
.style("stroke", "#000000")
.style("stroke-opacity", 0.1);
// Vertical axis guide lines.
svg.selectAll("line.x")
.data(y.ticks(5))
.enter()
.append("line")
.attr("x1", x)
.attr("x2", x)
.attr("y1", 0)
.attr("y2", this.heightInside - pushDown)
.style("stroke", "#000000")
.style("stroke-opacity", 0.1);
// Set up domains. Nice ensures the domains ends on nice round values.
x.domain([dataValues[0].x, dataValues[dataValues.length - 1].x]).nice();
y.domain([d3.min(dataValues, function (d) { return (d.y); }),
d3.max(dataValues, function (d) { return (d.y); })])
.nice();
// Draw line on graph.
svg.append("svg:path")
.attr("class", "line")
.attr("d", line(dataValues))
.style("stroke", function(d) { return colors[i]; });
// Marks.
svg.selectAll("circle_" + i)
.data(dataValues)
.enter()
.append("circle")
.style("fill", function(d) { return _this.colors[i]; })
.attr("r", 4)
.attr('cx', function (d) { return x(d.x); })
.attr('cy', function (d) { return y(d.y); });
I have a scatter plot made in D3 with circles denoting each data point. Here's my code:
viz.selectAll('circle')
.data(data)
.enter()
.append('circle')
.attr("cx", function(d) {return x(d.x)})
.attr("cy", function(d) {return y(d.y)})
.attr("r", 5)
.attr("fill", function(d) {return d.color})
.on('mouseover', function(d){
console.log(d.color)
})
What I would like to do is, when a given circle is hovered on, connect all circles through a line that have the same color. How can I do this? I can get the color logged into the console, but I don't understand how I can connect all points with the same color through a line upon mouse click?
You can assign a class with color code to your circles. Use d3.selectAll to retrieve all of them on mouseover. Then retrieve their coordinates and pass the coordinates to draw d3.svg.line.
svg.selectAll(".dot")
.data(data)
.enter().append("circle")
.attr("class", function(d) {
return 'dot color-' + color(d.species).replace('#','');
})
.attr("r", 3.5)
.attr("cx", function(d) { return x(d.sepalWidth); })
.attr("cy", function(d) { return y(d.sepalLength); })
.attr("dot-color", function(d) { return color(d.species).replace('#',''); })
.style("fill", function(d) { return color(d.species); })
.on("mouseover", function() {
d3.selectAll(".color-" + $(this).attr("dot-color"))
.attr("r", 5.5);
})
.on("mouseout", function() {
d3.selectAll(".color-" + $(this).attr("dot-color"))
.attr("r", 3.5);
});
Here's an example with color hover:
http://vida.io/documents/KinEKRkSPSfStA4Eu
You can also do it without relying on a common class attribute. In the mouseover handler:
d3.selectAll('.dot')
.filter(function (dOther) { return d.color == dOther.color })
.attr('r', 3.5)