I have created a fiddle of a bar chart, which is a part of a series of charts I'm creating using Raphael SVG. The other charts are vertically inverting perfectly using scale(1,-1). However, if you apply scale on this fiddle as given here:
SVGpaper.rect((-50 / 2), 0, 50, barHeight).attr({
transform: "t" + t1 + "," + t2 + "s1,-1",
"stroke-width": 1
});
and inspect the bars, the scale is working but the transform for the y-axis is changing and thus not creating any change in the SVG itself.
What is the problem here?
I think with Raph each rect is scaling around its own centre of origin, so in effect there is no visible difference. Whereas you want to scale around a specific centre. So if you use a specific centre of origin for them all like..
Swap
transform: "t" + t1 + "," + t2 + "s1,-1"
for
transform: "t" + t1 + "," + t2 + "s1,-1,0,0"
I think it will do what you are after, eg http://jsfiddle.net/Qru24/14/
Related
I'm working on an SVG an I want to add a scale and rotation transform. The rotate value is dynamic and the scale value is constant.
I tried like this:
boxElem.setAttribute("transform", "rotate(" + rotation + "), scale(0.9)");
It is not working. Only the scale value is having an effect. Can anyone tell me how to add multiple properties inside transform in JS.
setAttribute will result in adding the attribute transform like this :
<div transform="rotate(rotation) scale(0.9)"></div>
you need to update the style of the element :
boxElem.style.transform = "rotate(" + rotation + ") scale(0.9)";
I have a simple cog wheel drawn in illustrator. I've placed the svg markup in the index page and all is well. I can access it by its id.
The code below is part of a function that is executed on that time period so I don't need to worry about the time element.
I've looked around and am not understanding the examples I've found. This is what I have:
var motor=d3.select('#wheel')
motor.attr('transform', 'rotate(0, 0, 2)');
I want to rotate a couple of degrees every 300 milliseconds.
Your original code doesn't seem very functional (the commas in rotate are not needed). So taking those out, your statement is asking the svg to rotate by 0 degrees around the x, y coordinates 0, 2 (2 pixels down from the top-left corner). What you want is closer to:
var motor=d3.select('#wheel')
motor.attr('transform', 'rotate(2 ' + (objectwidth / 2) + ' ' + (objectHeight/2) + ')');
How can I change the position of the legend, where the legend being on the right most side, I can make it move to the left most side? I tried to do some changes in the nvd3.js code, but that hasn't worked for me at all!. I'm sure how and where can i add attributes to change the position?
Just for info, here is the legend (Key Usage', 'block Usage','other usage') whose position im trying to change:
Any ideasss? Thanks!
Absolutely right about the rightAlign Property and good news is we can set it in the addGraph function as follows:
chart.legend.rightAlign(false);
From the source code comment line 5005 in nv.d3.js:
//position legend as far right as possible within the total width
if (rightAlign) {
g.attr('transform', 'translate(' + (width - margin.right - legendWidth) + ',' + margin.top + ')');
}
else {
g.attr('transform', 'translate(0' + ',' + margin.top + ')');
}
So I guess you can not positioning the legend to left side:)
The code is designed to put the legend as far right as possible, it also contains some wrapping logic, once the length of legends in one line reach some max limit(like reach the chart's width), it will separate into two lines in well format.
Hope it helps!
There is a question here
d3.js: pan with limits
Answering the question to limiting the pan movement. But this uses axis, which I do not have.
What I have is a force directed graph which has the ability to pan and zoom.
Now I have put a limit on the zoom using :
.call(d3.behavior.zoom().on("zoom", redraw).scaleExtent([0.8, 2]))
I am wondering how do I go about limiting the pan movement of this graph so i dont drag the network/graph outside of the viewport.
(The network may change size depending on the JSON file imported, so I can't use exact figures)
inner.attr("transform","translate(" + d3.event.translate + ")" + " scale(" + d3.event.scale + ")");
There is no equivalent zoom.extent. You can override zoom's translate with mins and maxes inside your redraw function, though. For instance, if you wanted to limit zoom to stay within 500px of its original position:
function redraw() {
var oldT = yourZoom.translate()
var newT = [0,0]
newT[0] = Math.max(-500,oldT[0]);
newT[0] = Math.min(500,oldT[0]);
newT[1] = Math.max(-500,oldT[0]);
newT[1] = Math.min(500,oldT[0]);
yourZoom.translate(newT);
//The rest of your redraw function, now using the updated translate on your zoom
}
My question concerns this example:
http://bl.ocks.org/mbostock/4699541
And this bit of code:
var b = path.bounds(d);
g.transition().duration(750).attr("transform",
"translate(" + projection.translate() + ")"
+ "scale(" + .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height) + ")"
+ "translate(" + -(b[1][0] + b[0][0]) / 2 + "," + -(b[1][1] + b[0][1]) / 2 + ")");
What if there were text labels on the states? How would I handle text when zooming in and out of the states? I'd want to do it in a way that would keep the label the same size and still centered on the state. Here's what I've tried:
Tansforming/scaling the text along with the shapes. The text basically stays in its original position; it doesn't seem to scale and tansform the same way the shapes do.
Putting the text and states into a group together, then applying the transform/scale on the whole group. This just makes the text scale with the state -- so on zoom in, the text becomes huge. Etc.
Reprojecting. It works fine but it is way too expensive.
Removing the text and then reapplying it after the transition. This seems to just reapply the text at the same size, because it's applying with the same projection.
Any ideas? Any notes on things I might be missing? Thanks!