In this jsbin, I am trying to position the horizontal line to the smaller circle in the animating group but the jsbin is using getBoundingClientRect and some arbitrary values to get there.
I wanted to use this value:
d3.select('.circle-guide').attr('cx')
But it always returns the same value and does not take the transform into account.
How can I get the coordinates of a n animating element?
Related
I created an area chart with three.js. Each datapoint creates two triangles, one from bottom to height of the value to the next value height, one to fill the gap. Pretty similiar to the work of gmarland at http://gmarland.github.io/mercer/ (which I found after creating it when researching for a solution for this question, hard luck...).
Not knowing of any option to fill the area with a gradient as a whole, I filled the single triangles with vertexColors. Works, but obviously low values have the same color-gradient as higher ones just at another scale. Creating a nice effect but not visualizing the actual data. So here is the challenge where I can't think of a nice solution yet:
I would like to fill the area with a gradient that reflects the values. I.e. from 0 (yellow) to 100 (blue) and if a value is in between it stops somewhere at orange.
If I'd apply that logic using vertexColors for my triangles, the single triangles would get visible, as they'd have different colors at different heights, so that's not an option.
Any chance to fill the whole mesh (so, area of the chart) with a gradient?
Example of a 2D chart with that "effect": http://users.infragistics.com/2013.2/Ignite/Chart-Gradient.jpg
By the sounds of this i think you want to use a texture. You can generate several THREE.DataTexture all of witdh 1 and height 100. Several to make things simple with filtering. Fill them up with your values and then map them to your triangles using some logic.
Either scaled by the max height of these graphs, or the entire graph (looks like the red represent the peak of the curve, not the ceiling of the graph).
This is very similar to what you are doing with vertex colors, but instead of vertex colors, you need to generate UVs. U can always be 0 for every vertex, V is just the height of the vertex, normalized.
I have many game objects with line renderers attached to it . They are roughly in the shape of rectangles . How do I go about snapping these rectangle on the edges when these objects are dragged and bought close to each other ?
I have referred to this question . But it doesn't explain how to snap at specific positions.
Here is a sample image of the objects I want to latch.
There are many ways to do this task. Simply you can calculate the position of the second shape and when it's becoming closer to first with x or y axis just set their start position to first shape end position. The second way is just adding 2D colliders near the first object and simply when it triggers, move position. I will strongly recommend the first way.
I have two arrays of strings: these two arrays contain the labels that are to be inserted on the x and y axis (these labels will be those of a heatmap).
nutsNames corresponds to the x axis (left to right) and the yearsNames corresponds to the y axis (top to bottom).
As the data may vary, I would like to create a way that fits the data.
So the problem is the positioning of the elements on the axes and the svg size.
What I would like to get is something like this:
The image shows two examples of different data.
(I don't want to show axes, I put them only to understand what is their direction).
Here is the plunker.
I thought about finding the longest string in nutsNames and multiplying it by a constant (which I don't know how to define) to create the minimum necessary width of the svg.
A similar thing I did it for years.
Obviously the code doesn't work.
What you can do is input some dummy numbers for the width,height and margins and let it draw the elements first. Now since all your axis labels are in a g , you can get the width of gs for x and y labels.
The group<g> tag wraps the contents inside it so getting its width/height will automatically give you the width/height of the largest text inside it.
Now you have the width and height of those gs, all that's left is to change the dimensions of the svg accordingly.
Try adding or removing labels in your data. Here's your Plunker
I know there's a name for this, but I can't seem to think of it (or even provide a better title description.)
Image an empty horizontal rectangle - left edge has a value of 0, right edge has a value of 5. Now above it, there's a graph with an x-axis range of 0-5. When the plotting of the graph begins, the x-axis value is used as input to the horizontal rectangle in order to show, using a specific color, the area of the value.
Example: when input is given to the rectangle, the graph's x-axis value is 2.5. The rectangle now has half of it's area covered in red starting from the left edge. The value now is 3. Same idea, the area now stretches to "3".
It's a dynamic horizontal graph of sorts. Anywho, how do I go about creating this for iOS? Is there a class that's already built? Or do I just use rectangle drawing methods in a UIView subclass?
Thanks
update: here's an image of what I'm after: Bar
The interactive guideline adds circles that move along each series as you mouse over the graph. However, if there are points in the graph that are undefined that dot just moves along the line the top of the graph. I want to remove these dots, preferably just when values are undefined, but if that's not possible then just remove them altogether. I tried just excluding the values that would be undefined in the time series, but that's also ugly, as the tooltip then shows the value in the series which is closest to your current position; I need it not to show a number if there isn't actually a value at that position.