I am implementing show/hide feature of yAxes using show() and hide() methods. But the result looks this way:
Is there a way to remove that empty space between the axes?
hide simply sets the opacity of the elements to 0. To completely remove the space occupied by the axis, you need to set disabled to true on the axis' renderer. Setting it back to false will restore the axis completely.
axis.renderer.disabled = true;
Related
I want to animate a horizontal bar chart. The bars (squares) start at zero and grow within two easy-ease keyframes from 0 to a specific value. This value is displayed in a text layer. I have set up a slider which goes from zero to the specific value and controls both the text layer (value) and the size of the bar (width of square).
Problem: I want the value to follow the top of the bar chart as in here:
https://www.instagram.com/p/B7_5SOQFrW6/?utm_source=ig_web_copy_link
I tried to set easy-ease keyframes for the text layer too and adjust the values in the diagram editor. Result was too shaky and not nice to look at. Is there a solution with expressions?
source text of text layer for first Bar (1):
Math.round(thisComp.layer("controler").effect("1")("slider"))
source for square (first bar):
temp = thisComp.layer("controler").effect("1")("slider");
he_ = thisComp.layer("controler").effect("height")("slider");
[temp,wi_]
info: width is a slider with which I control the height of the bars.
Check this sample project, with both vertical and horizontal bars: https://url.io/ae_barchart
You can use sourceRectAtTime (like in the sample project), or calculate the position of the top side of your bar, knowing it's height and bottom Y coordinate and then translate it into Composition space from the bar layer`s space, so you can apply it to your Text Layer position.
If you check the position property of "bar_horizontal_text" / "bar_vertical_text" layers you'll see what I mean.
The rest of the setup is extra... just "fooling around". :-)
I would like to have two labels in my tableview.
but the label resize option is disabled.
How to have the two labels horizontally?
Select UIlabel instead of the cell and then you can set Auto resize like follow.
You may need AutoLayout and Custom Tableview Call. Use two different labels, e.g. one for username (left aligned text) and another for garbage text (right aligned text).
Now, set Content Compression Resistance Priority for one of both label, according to your requirement for data visibility when there is long texts in user name.
Look at these snapshots:
Labels with default content compression resistance priority
I changed content compression resistance priority for label blablabla blablabla, from 750 to 749.
Result is:
For more details see Apple document: Setting Content-Hugging and Compression-Resistance Priorities
Drag a horizontal UIStackView from object library and set it's constraints like this inside the cell
//
drag 2 labels inside it and make the distribution .FillEqually
//
Are you sure you have selected Label?
If you know about Layout constraints, it will be easier than this auto resizer.
Label 1==> Set Leading, Top & Bottom constraints to SuperView. Set Trailing constraint to Label2.
Label2==> Set Trailing, Top & Bottom constraints to SuperView. Set Trailing constraint to Label2.
Now, after this, it will show Red error arrow. Now, you have to decide which Lable width is a priority. After deciding, select that Lable and set Horizontal Content Hugging to 251(High) and Comprehensive to 751(High). Also, change lower priority label Content Hugging and Comprehensive to 249 and 749 respectively. Now, Red error arrow will not be shown and in the cell it will show all text in both labels without and cut.
if you want a easy and quick fix for it, implement a stack view inside the tableview cell. You can change the stackview as you want and also you dont have to worry about applying constraints.
I am creating a line chart with grid lines. Here's the similar example: http://bl.ocks.org/hunzy/11110940
I need to change the background of vertical space between X(2) to X(4), X(8) to X(10) and X(12) to X(14) on mouse hover. But I am not able to understand how to use D3 to reference those spaces between the grid lines.
There is nothing there to click on/hover over. The normal axis/grid creates lines, not rectangles. You would need to change the default behave of the axis objects to create "invisible, but clickable" rectangles in order to be able to attach a mouse event to those spaces.
I don't know if this is the recommended approach but it seems like it could work. After the axis has been created:
something
.attr('class','xaxis')
.call(xAxis)
You could select the ticks with something like this:
d3.select(svg).select('.xaxis g.tick').each(function(){
// this.transform will be "translate(X,Y)"
})
In the function you can query the existing properties of the g elements and extract the transform attribute which will contain the X and Y offset for the "tick". This can be used to determine one dimension of your rectangle objects. The other dimension is determined by the size of the other axis or something like that.
Could anyone help with a quick description of how to move the Three.js transform controls programmatically. I would like to test changing values dynamically and also set bounds when moving manually.
i.e http://threejs.org/examples/misc_controls_transform.html
Instead of "move the Transform Controls" you can move the object. The TransformControls will update itself.
In the example:
controller = scene.children[4];
box = controller.object;
box.translateX(20);
// ... Other transformations
render(); //You have to rerender the scene
To set bounds, you have to check the conditions after moving, adding an EventListener.
t.addEventListener('change', functionCheckBounds)
I'm using the d3 axis component but I want to tweak a few things after it is drawn. Specifically I would like to rotate the text labels by adding a transform to the text elements and also setting the text-anchor attribute from "middle" to "end".
The problem I'm hitting is that the text-anchor attribute seems to be set asynchronously by the d3 code as part of the transition. When I set the value to "end" in my code it subsequently gets set back to "middle" when the transition runs.
If I wait until transition end before making my change it's going to look choppy. What I'm wondering is if there is a way to insert myself into the process of drawing and transitioning the axis such that my text-anchor value will be used instead of the default one?
I believe this constitutes a bug in the axis component, so I've created a pull request to update label attributes immediately rather than as part of the axis transition. The text element's text-anchor attribute can't be interpolated, so there's no reason to defer the update to the transition, and setting it immediately makes it easy for you to fix it using post-selection.
An alternate fix would be to extend the axis component to support different styles of tick labeling. This way, you wouldn't need to use post-selection, so there's no conflict with the axis transition.
This seems something that can't be overridden from the API. A simple but hacky solution would be setting it in your stylesheet...
.x.axis text {
text-anchor: end !important;
}