As stated in previous questions (for example d3.js Odd Rotation Behavior), when you want to rotate an SVG object on its place you should use
.attr('transform','rotate(45,100,100)')
where the first number is the rotation degrees, and the other two are the coordinates of the rotation origin.
The problem here is that I want to execute the rotation inside a transition:
.transition()
.attr('transform', 'rotate(45,100,100)')
.duration(300)
and I get a strange behaviour, I can see a translation before the expected rotation.
You can see the result here: http://jsfiddle.net/uwM8u/121/
Is there a better way to obtain this?
The D3 way to do this is to use a custom tween function, which in this case is a simple string interpolation:
.attrTween("transform", function() {
return d3.interpolateString(d3.select(this).attr("transform"),
"rotate(" + (rotation+=45) + "," +
(diamond.x+diamond.width/2) + "," +
(diamond.y+diamond.width/2) + ")");
})
Complete demo here.
Add a parent <g> element with the translation so you are actually rotating the shape about the origin.
var svg = d3.select("body")
.append("svg")
.attr("width", 400)
.attr("height", 300);
svg
.append("text")
.text("click the square")
.attr("x", w/2)
.attr("y", w/2)
svg
.append("g")
.attr("transform", "translate(" + diamond.x + "," + diamond.y +")")
.append("rect")
.attr("transform", "rotate(" + rotation + ")")
.attr("x", -diamond.width / 2)
.attr("y", -diamond.width / 2)
.attr("height", diamond.width)
.attr("width", diamond.width)
.attr("fill", "teal")
.on("mousedown", function(){
d3.select(this)
.transition()
.attr("transform", "rotate("+ (rotation+=45) +")")
.duration(300)
});
or as a jsfiddle
Related
I tried to figure out the difference between 'd3.event.pageX' & 'd3.mouse(this)[0]'.
I guessed both are same but,
when I console.log both,
the value was different by '8' in my code.
var height=600;
var width=600;
var graphgap=60;
d3.csv('./details.csv').then(function(data){
var svg =d3.select('section').append('svg')
.attr('width',600).attr('height',600)
.on('mousemove',mousemove)
drawrect(data);
})
function drawrect(data){
let bars=d3.select('svg').selectAll('rect').data(data);
bars.enter().append('rect').classed('bargraph',true)
.attr('x',function(d,i){return (i+1)*graphgap})
.attr('y',function(d){return height-(d.Age)*5})
.attr('width',55)
.attr('height',function(d){return (d.Age)*(5)})
}
function mousemove(){
let mouselocation =[];
d3.select('svg').append('text')
.text(d3.event.pageX)
.attr('x',d3.event.pageX)
.attr('y',d3.event.pageY)
console.log(d3.event.pageX)
console.log(d3.mouse(this)[0])
}
So, I think these two are two different things.
Can anyone let me know why it makes a difference?
The reason why I tried to figure this out is because I was re-writing the code below.
<script>
// set the dimensions and margins of the graph
var margin = {top: 10, right: 30, bottom: 30, left: 60},
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
// append the svg object to the body of the page
var svg = d3.select("#my_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform",
"translate(" + margin.left + "," + margin.top + ")");
//Read the data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_IC.csv",function(data) {
// Add X axis --> it is a date format
var x = d3.scaleLinear()
.domain([1,100])
.range([ 0, width ]);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
// Add Y axis
var y = d3.scaleLinear()
.domain([0, 13])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// This allows to find the closest X index of the mouse:
var bisect = d3.bisector(function(d) { return d.x; }).left;
// Create the circle that travels along the curve of chart
var focus = svg
.append('g')
.append('circle')
.style("fill", "none")
.attr("stroke", "black")
.attr('r', 8.5)
.style("opacity", 0)
// Create the text that travels along the curve of chart
var focusText = svg
.append('g')
.append('text')
.style("opacity", 0)
.attr("text-anchor", "left")
.attr("alignment-baseline", "middle")
// Create a rect on top of the svg area: this rectangle recovers mouse position
svg
.append('rect')
.style("fill", "none")
.style("pointer-events", "all")
.attr('width', width)
.attr('height', height)
.on('mouseover', mouseover)
.on('mousemove', mousemove)
.on('mouseout', mouseout);
// Add the line
svg
.append("path")
.datum(data)
.attr("fill", "none")
.attr("stroke", "steelblue")
.attr("stroke-width", 1.5)
.attr("d", d3.line()
.x(function(d) { return x(d.x) })
.y(function(d) { return y(d.y) })
)
// What happens when the mouse move -> show the annotations at the right positions.
function mouseover() {
focus.style("opacity", 1)
focusText.style("opacity",1)
}
function mousemove() {
// recover coordinate we need
var x0 = x.invert(d3.mouse(this)[0]);
var i = bisect(data, x0, 1);
selectedData = data[i]
focus
.attr("cx", x(selectedData.x))
.attr("cy", y(selectedData.y))
focusText
.html("x:" + selectedData.x + " - " + "y:" + selectedData.y)
.attr("x", x(selectedData.x)+15)
.attr("y", y(selectedData.y))
}
function mouseout() {
focus.style("opacity", 0)
focusText.style("opacity", 0)
}
})
</script>
In documentation is written:
While you can use the native event.pageX and event.pageY, it is often
more convenient to transform the event position to the local
coordinate system of the container that received the event using
d3.mouse, d3.touch or d3.touches.
d3.event
d3.mouse - uses local coordinate (without margin (60px))
d3.event.pageX - uses global coordinate (with margin (60px))
But local cordinate start on 68px. I guess 8 pixels is used to describe the y-axis.
I am trying to disable the D3 zoom on a particular element. This element happens to be the PNG background to a circle.
Right now this is not working. I have tried to offset the scale parameter in the zoom, but the background PNG still 'grows' with the circle. Here is my jsfiddle.
This is how I try to offset the zoom:
d3.selectAll("#grump_avatar").attr("transform", "scale(" + 1/d3.event.scale + ")");
I know there are similar questions on SO, but please note none of them have received a satisfactory response thus far. Better luck here, hopefully.
Lots of issues with this code:
Matching by id is an exact match.
Your ids are on def attributes, which aren't the objects, you don't want to scale (those would be the circles).
To match multiple objects, you should be using a class on the circles.
You apply the zoom directly to the svg, you should be wrapping everything in a g. SVG handles the events, g is the zoomable "canvas".
Once you apply the zoom correctly you are going to lose your circle placement because you overwrite the transform without reapplying the translate.
You've made no use of d3 data-binding, so you can't persist your data correctly.
All this in mind, here is how I would refactor your code:
var config = {
"avatar_size": 100
}
var body = d3.select("body");
var svg = body.append("svg")
.attr("width", 500)
.attr("height", 500);
var g = svg.append("g");
var defs = svg.append('svg:defs');
data = [{
posx: 100,
posy: 100,
img: "https://cdn0.iconfinder.com/data/icons/flat-round-system/512/android-128.png",
}, {
posx: 200,
posy: 200,
img: "https://cdn1.iconfinder.com/data/icons/social-media-set/24/Reverbnation-128.png"
}, {
posx: 300,
posy: 300,
img: "https://cdn1.iconfinder.com/data/icons/user-pictures/100/male3-128.png"
}];
defs.selectAll("pattern")
.data(data)
.enter()
.append("pattern")
.attr("id", (d, i) => "grump_avatar" + i)
.attr("width", config.avatar_size)
.attr("height", config.avatar_size)
.attr("patternUnits", "userSpaceOnUse")
.append("svg:image")
.attr("xlink:href", (d) => d.img)
.attr("width", config.avatar_size)
.attr("height", config.avatar_size)
.attr("x", 0)
.attr("y", 0);
g.selectAll(".grump_avatar")
.data(data)
.enter()
.append("circle")
.attr("class", "grump_avatar")
.attr("transform", (d) => "translate(" + d.posx + "," + d.posy + ")")
.attr("cx", config.avatar_size / 2)
.attr("cy", config.avatar_size / 2)
.attr("r", config.avatar_size / 2)
.style("fill", "white")
.style("fill", (d, i) => "url(#grump_avatar" + i + ")");
var zoom = d3.behavior.zoom()
.on("zoom", function() {
g.attr('transform', 'translate(' + d3.event.translate + ') scale(' + d3.event.scale + ')');
d3.selectAll(".grump_avatar").attr("transform", (d) => {
return "scale(" + 1 / d3.event.scale + ")" + "translate(" + (d.posx - d3.event.translate[0]) + "," + (d.posy - d3.event.translate[1]) + ")";
});
});
svg.call(zoom);
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
EDITS based on comments:
To scale the circles opposite the zoom and position them, the key is:
d3.selectAll("circle")
.attr("transform", function(d){
return 'scale(' + 1 / d3.event.scale + ')'; // inverse of scale for size
})
.attr("cx", function(d){
return d.x * d3.event.scale; // change position based on scale, d.x is the original unscaled position
})
.attr("cy", function(d){
return d.y * d3.event.scale;
});
I'm using d3 v4. I want to create a rollover for my line chart such that the information that is displayed for each point is completely captured by a background box that is the same size as the text. I'm confused about how to do this, though. I'm creating the SVG element like so
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
...
var rect = focus.append("rect")
.attr("x", 9)
.attr("dy", ".35em")
.attr("width", 50)
.attr("height", 50)
.attr("fill", "yellow");
var text = focus.append("text")
.attr("x", 10)
.attr("y", 10);
svg.append("rect")
.attr("class", "overlay")
.attr("width", width)
.attr("height", height)
.on("mouseover", function() { focus.style("display", null); })
.on("mouseout", function() { focus.style("display", "none"); })
.on("mousemove", mousemove);
function mousemove() {
var x0 = x.invert(d3.mouse(this)[0]),
i = bisectDate(data, x0, 1),
d0 = data[i - 1],
d1 = data[i],
d = x0 - d0.date > d1.date - x0 ? d1 : d0;
focus.attr("transform", "translate(" + x(d.index_date) + "," + y(d.value) + ")");
var descriptor = d.value + "\n" + d.index_date
focus.select("text").text(descriptor);
}
I'm having a couple of problems, though. First the bounding box is of fixed dimensions, so it is not capturing the text. Second, my new line seems to be getting ignored in my text. Ideally, I want two lines, one with a value and the second with a date. The Fiddle that illustrates what I have so far -- https://jsfiddle.net/8reo2Lvc/1/ . How do I create the bounding box that is the same size as the text it is surrounding?
Regarding the new line problem, you cannot break a SVG text element using "\n". Instead of that, append a <tspan>:
focus.select("text")
.text(d.value)
.append("tspan")
.attr("x", 10)
.attr("dy", "1.5em")
.text(d.index_date);
Now, back to the bounding box problem. A simple approach is getting the bounding box of the text element:
var bbox = focus.select("text").node().getBBox();
And use it to set the width and height of the rectangle:
rect.attr("width", bbox.width)
.attr("height", bbox.height)
Here is the updated fiddle with those changes: https://jsfiddle.net/yw46ycse/
I'm trying to get a second bar into my graph. The elements are correctly getting appended but not in the correct location and not the correct height. What I want from the data to be at the 1 position in the x-axis to have 2 bars one with a height of 2 and the other height of 3 and so on.
http://jsfiddle.net/626uesbh/4/
var svg2 = d3.select("#histogram").append("svg2")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg2.selectAll(".rect")
.data(data)
.enter().append("g")
.attr("transform", "translate(0, 100)")
.append("rect")
.attr("class", "rect")
.attr("width", 10)
.attr("height", function(d) { return height - y2Map(d); })
.attr("x", xMap)
.attr("y", yMap)
.style("fill", "blue");
I suspect svg2 transform is the problem but after trying fiddling with it for an hour I can seem to get what I want. I looked at this question and tried to implement it into my problem. D3.js grouped bar chart
Since each element in your data contains the values for both bars, you have to add them as a group. That is, add a 'g' element to the chart for each element in the array, then add a bar for inner_array[1] and inner_array[2].
Hopefully this gets you on the right path, essentially all I changed was the stuff after your //bar comment.
http://jsfiddle.net/626uesbh/6/
// bar
var bar_groups = svg.selectAll('.bar-group')
.data(data)
.enter().append('g')
.attr('class', 'bar-group');
bar_groups.append('rect')
.attr("class", "rect")
.attr("width", 10)
.attr("height", function(d) { return height - yScale(d[1]); })
.attr("x", function(d) {
return xScale(d[0]) - 5;
})
.attr("y", function(d) {
return yScale(d[1]);
})
.style("fill", "green");
bar_groups.append('rect')
.attr("class", "rect")
.attr("width", 10)
.attr("height", function(d) { return height - yScale(d[2]); })
.attr("x", function(d) {
return xScale(d[0]) + 5;
})
.attr("y", function(d) {
return yScale(d[2]);
})
.style("fill", "blue");
Note: there are much more elegant ways to do this. I am only showing you how to add the bars to your existing code. Please take a look at http://bl.ocks.org/mbostock/3887051 for further guidance.
I am doing a heatmap with zoom and pan functionalities, and realized that the data points is showing up on the left side of the y-axis when zooming and panning, after I increased the space to the left of the heatmap, in order to make space for the y-axis (See picture). How can I avoid this? A code sample is provided in below.
var zoom = d3.behavior.zoom()
.scaleExtent([dotWidth, dotHeight])
.x(xScale)
.on("zoom", zoomHandler);
var svg = d3.select("body")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
function zoomHandler() {
var t = zoom.translate(),
tx = t[0],
ty = t[1];
tx = Math.min(tx, 0); // tx < 0
tx = Math.max(tx, -1000); //
zoom.translate([tx, ty]);
svg.select(".x.axis").call(xAxis);
svg.selectAll("ellipse")
.attr("cx", function(d) { return xScale(d.day); })
.attr("cy", function(d) { return yScale(d.hour); })
.attr("rx", function(d) { return (dotWidth * d3.event.scale); });
}
svg.selectAll("ellipse")
.data(dataset)
.enter()
.append("ellipse")
.attr("cx", function(d) { return xScale(d.day); })
.attr("cy", function(d) { return yScale(d.hour); })
.attr("rx", dotWidth)
.attr("ry", dotHeight)
.attr("fill", function(d) { return "rgba(100, 200, 200, " + colorScale(d.tOutC) + ")"; });
Zoom and pan image using manual scaling for CanvasRenderingContext2D.drawImage with d3. Preserves aspect ratio of the image
http://bl.ocks.org/robnagler/e245b69c473da73dfb85
or this one
http://www.d3noob.org/2014/02/generate-heatmap-with-leafletheat-and.html
I figured out that the solution was to create a clipping path. I used the clipping method from this example: http://bl.ocks.org/mbostock/4248145. Basically I added the following code:
svg.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("class", "mesh")
.attr("width", width)
.attr("height", height);
svg.append("g")
.attr("clip-path", "url(#clip)")
.selectAll(".hexagon")
.data(hexbin(points))
.enter().append("path")
.attr("class", "hexagon")
.attr("d", hexbin.hexagon())
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.style("fill", function(d) { return color(d.length); });
The code works fine with zooming features as well. Just call the zoom function when creating the your svg canvas. Like this:
// SVG canvas
var svg = d3.select("#chart")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.call(zoom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");