I have an SVG with multiple <path></path>.
I want to change the d attribute and apply a transition on this change.ù
I tried the usual way (transition: all 1s), but it doesn't work.
Do you have an idea on how to achieve this?
Related
We need to make it move like here.example The code is complex there, I can't figure it out.
I wrote the code my code, but I don’t understand how to make the tooltip move horizontally not behind the mouse, but near the nearest horizontal mark (as in the example)
It is not yet clear where the text above the bold text in the tooltip comes from. How to remove it so that it looks like in the picture?
How do I make the title of the tooltip match the label on the X-axis?
There are many ways to accomplish this. The way I typically do this is to create a series of SVG elements -- such as circles or rects -- using the same scale and data as the paths.
You can make these objects visible or invisible. Either way, you can attach mouseenter, mouseleave events to each to render and populate the tooltip.
I am trying to adapt Bo Ericsson's D3 realTimeChartMulti example to a particular use, and I need to add a gridline where each category appears. I have not been able to figure out how to do that using his code.
https://bl.ocks.org/boeric/6a83de20f780b42fadb9
Does anyone have any idea how to do it? Everything I've tried (manipulating the D3 y axis to add ticks(5) would be the simplest alternative, as a start) causes the display to stop rendering altogether.
The simplest way to add a gridline is setting the innerTickSize() method (tickSizeInner in v4/5), which in your case would be:
yAxis = d3.svg.axis().orient("left").innerTickSize(-width);
Then, you can style it the way you want in the CSS by selecting a line with the y and axis classes (here I'm using a dashed line). Alternatively, you can apply the style straight to the group selection (append the axis first, and then append the circles).
Finally, you can see that the circles are behind the gridline, which is not a very elegant design. You can change that by changing the order of the appended elements.
Here is the forked code: http://bl.ocks.org/GerardoFurtado/2eaffbb3437acb62f66a7b6cb85bf435/3042a5357cbc703dcf102c733b7b5772b82d744c
I'm porting over a d3 application into Aurelia and need to access the width and height of the chart's SVG parent in order to fit the chart properly to the current screen dimensions.
Before porting, it looked like this, filling up the whole container properly:
This is what it looks like in Aurelia:
It sets its dimensions by calling d3.select('#timeline-svg').style('width') and d3.select('#timeline-svg').style('height'). But now, in Aurelia, whenever I call those it returns dimensions of 300 x 150, no matter what the dimensions of the SVG actually are. I tried calling the same code on the SVG's div parent (which has identical dimensions) and that didn't help either.
So then I thought to try two-way data binding and changed my SVG tag to <svg id="timeline-svg" width.two-way="width"></svg> (and declared a corresponding width variable in my view-model), but I get the error: Error: Observation of a "svg" element's "width" property is not supported.
I've even tried using aurelia-pal, injecting it as DOM and calling:
attached() {console.log(this.DOM.getElementById("timeline-svg").style.width);} but all that gives me is an empty string.
There's a gist here (minus the d3 code, but all I want to figure out is how to access the dimensions of the SVG element in app.html from within app.js). What am I doing wrong? Thanks!
I'm not sure if this is exactly what you're looking for, but you could use the ref custom attribute to get a reference the svg element itself.
<svg ref="svgElement"></svg>
Then use the getBBox() function. The result of that function will have a width property you can use.
this.svgElement.getBBox().width
Here's a simple gist example: https://gist.run/?id=0ed86f511533512a22d002675221d812
I am trying to modify Bullet Charts example of dimple.js with each bullet chart being in a child-svg of the parent-svg. Purpose of having individual svg for each bullet chart is to make their management (show/hide/remove) easier. Also, this makes the recursive definition of a chart complete - That is, a chart is contained by an svg.
The fiddle for the modified version is here....
As you can see, from 2nd chart onwards, on mouse hover, tool tips go out of place!!! Please note that, for child-svg, I've set the style overflow: visible without which tool-tips were not visible at all.
Want to know if I am missing anything in handling the attributes of child-svg elements or is it a bug in dimple.js. Also, please let me know if you know of any workaround.
Thanks.
One of the first questions I have is why do you want child svg elements? What are you trying to accomplish?
The only difference I see in your code and the example is the height / width swap at the top and the sub svg + bounds.
Keep in mind that the origin changes with each sub-svg. This might be why you are having trouble with the tool-tips. Maybe you have that worked into your add-bullet calls.
I think nagu has the right approach here if you really want separate svg elements.
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;
}