In my d3 plot, this is the code and the rendered plot.
As you can see the lines go into the y axis. I was looking for a solution and by chance I appended an svg making the code look like this:
Now the lines are not overlapping the y axis. Why is that exactly?
Note: I changed the width of the appended svg but still the box fits perfectly.
Your paths start at an x position of -25.334... rather than 0, so if translate them horizontally by 30, they will start at 4.666..., which overlaps with your axis. If you put them inside that inner svg element, they will get clipped at the bounds of the svg element and will start at 30 (after translation).
You can disable the clipping by setting an overflow attribute: <svg width="1096" height="160" overflow="visible">.
Related
I am trying to zoom in on parts of a line chart using viewBox. I managed to get it working, however, not sure how to deal with the fact that everything scales accordingly (line path also becomes larger).
What I am looking for is for the line to stay constant while zoom is happening. I researched that there is also a way with translation and scale, but not sure how to implement it.
Also, not sure how to make this behavior more automatic. For example, I am zooming in on a range between two years: 2010 and 2011. Currently, I specify the y value manually. But ideally, this would be specified in using yScale function.
Any help would be appriciated!
Here is my repl: https://svelte.dev/repl/be0df7e353334108b3d432d5c82a6cd3?version=3.38.2
One way to accomplish this is by scaling the viewBox of the <svg> element.
You can do this by binding the x, y, width and height of the viewBox.
<svg ... viewBox="{x} {y} {width} {height}">
You can also tween the viewbox changes:
By using Svelte's tweened() store for x, y, width, height. ie <svg viewBox="{$x} {$y} {$width} {$height}">
Or by using SVG's <animate> element. ie <animate attributeName="viewBox" values="..." dur="2s"/>
I am trying to rotate only the <g class="tick">'s labels of this D3 bar-chart but the whole axis rotates and ends-up looking like this:
I have tried:
A .attr("transform", "rotate(...)"): The whole axis rotates...
The same inside the line .selectAll(".tick"), which causes the labels to rotate along themselves but they get relocated to the corner of the graph, like this:
How can I rotate each element relative to its own position?
You want to set .attr("transform", "rotate(...)") for only text element not the entire tick.
I figured it out with this D3 block. I have updated the chart so the old one is no longer visible. The lines added that fix the problem have been commented with "Line added to fix rotation" just in case someone comes across the same issue.
Thanks #Daniel for pointing me out in the right direction.
Is there any way to control height of text within rectangle vertex of mxGraph ?
I Just want to hide extra text from bottom of rectangle.
See below screenshot to see what is happening.
By adding overflow=hidden in style of rectangle vertex solved my problem.
Now rectangle is showing as below.
Aim:
I have a website with some content and svg scheme in the middle of it. When one points to the elements of the scheme, tooltips should appear next to the mouse cursor.
Problems: Based on examples like this (which was shown by Julian Berger in How to get the position of SVG element), I made working SVG. Unfortunately it is working only as long as the SVG scheme is not included into the website. Content other then SVG make evt.clientX and Y coordinates system to fail --> the tooltip starts to appear in some distance from the cursor (it seems that the more of other then SVG content I have, the further tooltip is moved away from cursor). The simple example is shown here, simply by adding couple of <br/> before the actual SVG begins.
And my question:
Do you have some ideas how to fix the position of the tooltip, so that it would appear always next to the moving cursor?
All the best,
Wojtek
All you have to do is alter mousemove handler a little. It should position the tooltip relative to the top left of the SVG, rather than the page. You do that by subtracting the position of the SVG, which we get by surrounding the SVG with a <div> element and accessing its offsetLeft and offsetTop properties.
<div id="mysvg">
<svg>...</svg>
</div>
function ShowTooltip(evt, mouseovertext) {
svg = document.getElementById("mysvg");
tooltip.setAttributeNS(null,"x",evt.clientX+11 - svg.offsetLeft);
tooltip.setAttributeNS(null,"y",evt.clientY+27 - svg.offsetTop);
...
}
Full demo here
I have a resizable div. It has two inner divs. One of the inner divs has an svg element in it.
In the svg element I am adding and removing the content dynamically such that each time I add something in my svg. I increase its height by adding 20px to it and when I remove I subtract the height by 20px. When my svg height become greater than its parent div a scroll bar appears in the parent div. Similarly scroll bar is removed when svg height is less than parent div.
The problem starts when I do the resizing. I have added a viewbox option in my svg for resizing. But when I increase the size some of my svg elements are not visible.
And when I decrease the size my svg get placed at a lower position leaving empty space.
Its all messed up in my mind that how to deal svg position/height with viewbox property.
I have tried to make a fiddle to simulate the behavior somehow. But here elements in svg are not adding dynamically and the svg height is constant.
Link to my code
Any help will be appreciated
LATEST UPDATE:
Most important if you're going to use SVG it is better to be acquainted with spec or read a definite guide like "SVG Essentials" by J. Eisenberg, cause it is not such a trivial thing you might think at first.
Then if I understood you right, there is another approach jsFiddle.
First, set correctly the value of the viewBox attribute. In your current example in should be viewBox="0 0 130 220" so that all you content be visible (you have to specify at least 220 as the last number cause your last group <g> is translated i.e. it's coordinate system moved down to 200 units, if you don't do that your content will be not visible cause it is far beyond the outmost y-point of your viewbox, which in your jsfiddle is set to 70).
Second, specify the correct value for preserveAspectRatio which should be preserveAspectRatio="xMinYMax meet", which means (courtesy of the "SVG Essentials" by J. Eisenberg):
Align minimum x of viewBox with left corner of
viewport.
Align maximum y value of viewBox with bottom
edge of viewport.
meet means meet the content, not slice it, if it doesn't fit.
Third, if you are going to add elements to the bottom of your svg you have to change the viewBox value accordingly, cause if you will insert into it smth like:
<g transform="translate(0, 300)">
<text>text 55 </text>
</g>
it will occur beyound your viewBox, which has a max y-point at 220 (if you would set it as I said earlier)
For now hope that helps, let me know.
OLD STUFF
remove style="height:200px" from your svg
Then if you need height, you can dynamically change the height of your svg
var $wrapper = $('#resize'),
$svg = $('#svg2');
$wrapper.resizable({
handles: 'se',
aspectRatio: 400/200,
resize: function(ev, ui) {
$svg.css('height', ui.size.height);
}
});
'#resize' - is the id of the wrapper of the svg
I'm now very confused of what you want. You specified viewbox attr on the svg. That means that only a part of your svg will be visible. Try to remove viewbox and see whether result looks satisfactory for you.
It then be all visible and normally adjusted to parent div