Here is my Code on JsFiddle I am using d3.svg.area() to draw an area and drawing the points as svg:circle on it. whch works okay If I change .interpolate('basis') to .interpolate('cardinal') or linear But how to put the points properly with basis interpolation ? e.g. I want to put the near match points
You can use the interpolation method "monotone" that will respect your y maximum and therefore your circles will not be displaced.
-Canimus
Related
I will try to explain what I'm trying to accomplish.
I have a point feature to which I set an array of 2 styles: 1 style represents a rotated image at the given point, the second one should be a rotated text at a fixed distance of the given point.
To clarify things I've created an image. I want to achieve the situation on the right. (the x,y,z lines and labels are for explanation purposes). I want to move the text over a fixed distance z. The rotation angle is also variable.
So what I did was give a rotation to the ol.style.text object and then give the text an offset for Y but then the text gets pulled straight below the point.
What I am looking for is a method to offset the text for a given distance, taking the rotation in account, without having to manually set the ofssetX and offsetY.
One solution here is indeed to use geometry.. calculate x and y offset based on the angles and the given z , using the sin formulas and the Pythagorean theorem, but I would like to avoid those calculations and find a more simple resolution.
I am using the latest version of openlayers3, currently v3.16.0
Thanks in advance.
I'm relatively new to d3 and am attempting to augment a radar diagram such that it rotates on click and the next axis points directly upwards.
The example in which I am working from is found here.
Problem
Currently, when the svg is clicked, I rotate the entire svg by a specified angle based on the number of axis there are in the graph. Since I am rotating the entire svg the labels that are appended to each axis will rotate also (as shown in the following image).
The text is currently unreadable and I want to achieve a solution which is more similar to the following image:
I would like each label to stay with their respective axis and also stay upright after the svg has been rotated, but I am finding it hard to achieve this.
JSFIDDLE
This JSFIDDLE is the stripped down code of the current implementation (I left out the numerous failed attempts) and the following code, which would be in the 'rotateOnClick' function is the closest I have came to a solution so far (I haven't used the index i variable so far but my intention was to swap the position of labels with each other when clicked).
g.selectAll(".legend")
.transition()
.duration(cfg.rotateDuration)
.attr("transform", function(d, i){
if (i<total) i++;
else i = 0;
return "rotate("+newAngle*-1+", "+(cfg.w/2)+",0 )"
})]
.ease(cfg.easeFunction);
I need to manipulate each label individually and stay aligned with its respective axis and also for it to work with a dynamic number of axis.
I greatly appreciate any help and insight.
I'm trying to replicate this Focus+Context via Brushing example. I'm including the same layout, but with a scatterplot instead of a line/area plot.
I started working off this example I found which combines the area plot and a scatterplot. However, when I scrap the area plot, I lose the zoom/focus capability.
My last step (thus far unsuccessful) is to make the brush (small focus bar on the bottom) actually respond to the main panel (make it adjust/zoom in when smaller time periods are selected in the brush). The brush adjusts the axis as it should, but I just haven't been able to make the brush actually adjust/zoom the points on the main scatterplot. I'm not trying plot anything in the brush - there will be a lot of points, so keeping the brush with a grey background and no points is fine.
here's my fiddle: http://jsfiddle.net/fuqzp580/3/
Sidenote: I can't quite get the jsfiddle to work with the way I'm using d3.csv, so I coded up a slightly altered version with dummy data in lieu of using d3.csv. However, I included the d3.csv code (commented out), just in case that could be a cause for my problem.
I'm new to d3 so any pointers or ideas welcome!
Here's an updated fiddle with the dots zooming on the points in the main panel: http://jsfiddle.net/henbox/3uwg92f8/1/
You were very close, I just made 3 small changes:
Firstly, uncommented the code you already had in function brushed() for selecting the dots
Secondly, defined mydots globally (since you were only doing it inside initialize() and it needs to be used beyond this scope). Added this on line 55:
var mydots = focus.append("g");
And last (and most importantly), I changed the definition for xMap from
xMap = function(d) { return x2(d.time); }
to
xMap = function(d) { return x(d.time); }
When brushing, it's the x scale that gets updated, not the x2
So, basically I have a piechart drawn with Raphael. Each segment corresponds to a different value and I want to have a unique tooltip popup for each segment. In this example I am trying to draw a circle every time one of the segments are hovered, but I can't figure out a way to do it dynamically so that I can set the position point relative to the segment that is being hovered. Sorry for poor and convoluted explanation, but you can see the example of my code here:
http://jsfiddle.net/DgrgC/2/
Thanks for your help!
Inside the hover callback, this refers to the current path you're drawing. So this.attrs contains the path attributes. Note that paths don't have cx and cy attributes, as you're trying to access in you example.
I'm not sure what you're trying to accomplish, but you can check my example on how to draw some circles based on path data:
http://jsfiddle.net/DgrgC/3/
Basically:
this.attrs.path[1] //second point of the path
this.attrs.path[1][1] //x coordinate of this point
this.attrs.path[1][2] //y coordinate of this point
I'm currently implementing a line chart in gRaphael which requires the x axis to move up the y-axis such that it lies on zero (which I have already accomplished by drawing my own axes).
However, I'm now encountering a problem when attempting to shade the area above/under the x-axis; gRaphael's shade function only shades from the bottom of the graph to Y-height (as opposed to being from 0 on the y-axis to the y-height). The result is the following:
http://i.stack.imgur.com/ZuPhw.png
I have found a couple of lines in g.line.js which look suspiciously like they would help, but I have no idea what the "L", "C", and "M" values mean (I assume they are to tell a part of the program to draw a line etc?)
Any help from anybody more informed than me would be greatly appreciated!
I solved this by overriding the g.line.js file and creating an offset to add to the Y values. The offset was calculated by considering the maximum and minimum values on the Y axis, the height of the SVG itself and the "gutter" - a value which adds padding to the SVG itself (so that values on the axes can be displayed better). The formula looks like this (and is, incidentally, identical to how the axes were moved to zero):
(height - 2*gutter)*(miny/(maxy-miny))