I'm trying to add a custom button to amcharts, just like the 'Show All' in the right corner with lens icon when zooming in, but, with different functionality.
i.e http://www.amcharts.com/demos/chart-with-gaps-in-data/
I could't find it in the API reference, I was wondering if such functionality exists?
What I have in mind is,
add a label with a class using
allLabels: [{... 'id': 'custom-button'}];
then replace that label with the similar SVG code as the 'Show all' button
$('.custom-button').replaceWith(...);
<g transform="translate(962,48)" visibility="visible">
<rect x="0.5" y="0.5" width="96" height="33" rx="0" ry="0" stroke-width="1" fill="#000000" stroke="#000000" fill-opacity="1" stroke-opacity="1" opacity="0" transform="translate(-8,-8)" class="amcharts-zoom-out-bg"></rect>
<image x="0" y="0" width="19" height="19" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="http://www.amcharts.com/lib/3/images/lens.svg" class="amcharts-zoom-out-image"></image>
<text y="7" fill="#000000" font-family="Lato" font-size="14px" opacity="1" text-anchor="start" class="amcharts-zoom-out-label" transform="translate(24,7)"><tspan y="7" x="0">Show all</tspan></text>
</g>
lastly, create handler for 'click' event with $('..').on('click', function(){...})
Is there more clean solution?
Related
I would like to identify my nodes via Javascript and hence ensure that each element (graph, node, edge) has a unique ID.
I found the https://github.com/magjac/d3-graphviz#maintaining-object-constancy section and thought that.keyMode('id') would tell d3-graphviz to use my IDs. But ids are still using the graph ID and don't seem to use the node ID. I found instead a title attribute from this example: https://bl.ocks.org/magjac/28a70231e2c9dddb84b3b20f450a215f
What is this attribute? Can I be sure that it is the ID I am looking for? What is the relationship in D3-graphviz between id and title?
EDIT
I tried to dig and came up with this simple Example.
I have this (autogenerated) input file:
digraph {
label=""
id="g1"
n1 [id="n1", label="First Node"]
n2 [id="n2", label="Second Node"]
n1 -> n2 [id="e1", arrowHead="normal", arrowTail="dot"]
}
I get this outcome:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="134pt" height="116pt" viewBox="0.00 0.00 133.59 116.00">
<g id="g1" class="graph" transform="translate(4,112) scale(1)">
<polygon fill="white" stroke="transparent" points="-4,4 -4,-112 129.59,-112 129.59,4 -4,4"></polygon>
<!-- n1 -->
<g id="n1" class="node">
<title>n1</title>
<ellipse fill="none" stroke="black" cx="62.8" cy="-90" rx="52.16" ry="18"></ellipse>
<text text-anchor="middle" x="62.8" y="-85.8" font-family="Times,serif" font-size="14.00">First Node</text>
</g>
<!-- n2 -->
<g id="n2" class="node">
<title>n2</title>
<ellipse fill="none" stroke="black" cx="62.8" cy="-18" rx="62.59" ry="18"></ellipse>
<text text-anchor="middle" x="62.8" y="-13.8" font-family="Times,serif" font-size="14.00">Second Node</text>
</g>
<!-- n1->n2 -->
<g id="e1" class="edge">
<title>n1->n2</title>
<path fill="none" stroke="black" d="M62.8,-71.7C62.8,-63.98 62.8,-54.71 62.8,-46.11"></path>
<polygon fill="black" stroke="black" points="66.3,-46.1 62.8,-36.1 59.3,-46.1 66.3,-46.1"></polygon>
</g>
</g>
</svg>
but when I programmatically in an mouse event that provides me the <g> for a node, then I get the ID: svg-0.g1.n2
The last bit created the confusion. I need to find the attribute value, and not a connected value. But that will work. Thanks!
The underlying Graphviz language provides an id attribute (https://www.graphviz.org/docs/attrs/id/). Based on the d3-graphviz consistency text, it looks like d3-graphviz will honor this id attribute.
For some reason my spinner.svg is not animating when using xlink:href. Embedding the SVG on the page and using xlink:href seems to work fine, as the snippet below shows.
The problem: static (and solid!) spinner instead of animation
Why are the animation tags of the SVG suddenly not taking effect? The reference must be working since the image is actually displaying.
EDIT: Could this have to do with the shadow dom and xref?
According to Sara Soueidan "The target element must be part of the current SVG document fragment". I might be overloading what "document fragment" means, but to me document fragments belong in Shadow DOM land, and I suspect that SMIL animations might not work when using <use> statements due to this?
Working versions
.xlinked {
color: green;
}
img {
color: red; // not taking effect - of course! just a test.
}
.embedded {
color: blue;
}
<h1>xlink local</h1>
<svg class="xlinked">
<!-- could not get this external reference to work?
<use xlink:href="http://imgh.us/spinner_1.svg" />
-->
<use xlink:href="#spinner" />
</svg>
<h1>embedded</h1>
<div class="embedded">
<svg id="embedded" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/>
<circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round">
<animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/>
<animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/>
</circle>
</svg>
</div>
<h1>img</h1>
<img src="http://imgh.us/spinner_1.svg" />
<h1>External absolute xlink (not working)</h1>
<svg>
<!-- could not get this external reference to work. should be the same as a local reference? -->
<use xlink:href="http://imgh.us/spinner_1.svg" />
</svg>
<h1>Source SVG with symbols for xlink reference </h1>
<svg xmlns="http://www.w3.org/2000/svg"><symbol id="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="50" cy="50" r="45" stroke="rgba(43,43,43,0.3)" fill="none" stroke-width="10" stroke-linecap="round"/><circle cx="50" cy="50" r="45" stroke="currentColor" fill="none" stroke-width="6" stroke-linecap="round"><animate attributeName="stroke-dashoffset" dur="2s" repeatCount="indefinite" from="0" to="502"/><animate attributeName="stroke-dasharray" dur="2s" repeatCount="indefinite" values="150.6 100.4;1 250;150.6 100.4"/></circle></symbol></svg>
In SVG1.1, Use element requires reference to SVG fragment not SVG URL. Try to add id attribute to root svg element of external SVG file and add hash string to href value of use element, like this.
external svg(spinner_1.svg)
<svg xmlns="http://www.w3.org/2000/svg" id="root">
<!--svg structure-->
</svg>
html uses external SVG file
<svg>
<use xlink:href="http://imgh.us/spinner_1.svg#root" />
</svg>
Note:In SVG2, you can set SVG URL to href attribute of use element. See https://www.w3.org/TR/2016/CR-SVG2-20160915/struct.html#UseElement
I want to make an animation that looks like a google search box
I have a text path where the word appears in a 'bold' font.
I would like the word to animate so that the first letter appears 'regular', then the first and second, then the first second and third etc.
Is this possible to do with an svg animation?
<svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path id="path1">
<animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" />
</path>
// this text "types"
<text font-size="90" font-family="Montserrat" fill='black'>
<textPath xlink:href="#path1">Google is</textPath>
</text>
// I want this text to animate the "font-style"
<text font-size="90" font-family="Montserrat" fill='black' x="100" y="200">
Google is gold
<animate attributeType="CSS" .... />
</text>
You'd need to put the letters in separate tags within the textPath so you can target them individually with animations.
I've just done the first letter but you could extend this to all the letters if you wished.
<svg width="100%" height="100%" viewBox="30 -50 600 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
<path id="path1">
<animate attributeName="d" from="m100,50 h0" to="m100,50 h1100" dur="5s" begin="0s" repeatCount="indefinite" />
</path>
// this text "types"
<text font-size="90" font-family="Montserrat" fill='black'>
<textPath xlink:href="#path1">Google is</textPath>
</text>
// I want this text to animate the "font-style"
<text font-size="90" font-family="Montserrat" fill='black' x="100" y="200">
<tspan>G<animate attributeType="CSS" attributeName="font-weight" from="700" to="100" dur="1s" begin="0s" repeatCount="indefinite"/></tspan>oogle is gold
</text>
With firefox, when I middle-click (or ctrl+click) on a use element, it open the xlink:href url in new tab (like a href)
bug or feature?
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;"></use>
</svg>
<p>ctrl+click on right circle</p>
It's an unresolved bug that they're not really sure how to handle. Trigger is the xlink:href that gets somehow internally treated just like an A.href does (middle-click or ctrl + click open to a new tab.) One workaround is to bury the xlink:href element under an invisible rect:
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e" />
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red;" />
<rect style="opacity:0" x="80" y="10" width="60" height="60" />
</svg>
<p>ctrl+click on right circle - nothing happens</p>
If you have any events that need to trigger, you'll have to tie them to the invisible rect.
As a workaround for the bug linked in previous answer you may also use pointer-events: none CSS rule on the use element:
<svg viewBox="0 0 400 80">
<circle id="circle" cx="40" cy="40" r="30" fill="#29e"></circle>
<use xlink:href="#circle" transform="translate(70, 0)" style="stroke: red; pointer-events: none;"></use>
</svg>
<p>ctrl+click on right circle</p>
Or declare that all use elements must not be clickable with <style>use{pointer-events: none;}</style>.
Obviously, this workaround is applicable only in case the element has NOT to be interactive at all.
I have to use CKEditor to allow users to edit some HTLM pages that may include SVG images. And the links defined in those SVG images contain some attribute like xlink:href. E.g:
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a xlink:href="http://www.google.com">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
I already set CKEDITOR.config.allowedContent = true with hope that all tags and attributes will be retained by the editor.
However, when I switch back and forth between WYSIWYG and HTML mode, I notice that the A tag become like this:
a href="http://www.google.com" xlink:=""
<svg preserveaspectratio="xMinYMin meet" version="1.1" viewbox="0 0 778 873" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image height="100%" width="100%" xlink:href="map.png"></image>
<g class="hover_group" opacity="1">
<a href="http://www.google.com" xlink:="">
<rect fill="red" height="100" opacity="0.0" width="160" x="110" y="240"></rect>
</a>
</g>
</svg>
This behavior only happens to the A tag, not the IMAGE tag.
Of course, this makes the link in SVG file no longer work.
Anyone know how to fix this? Thanks. I don't want to manually allow all the allowed tags or attributes because this may be so much work.
It is a bug (called also "lack of feature") in CKEditor. It's not able to process attributes ending with ":href" properly.
I reported http://dev.ckeditor.com/ticket/13233 which also includes a possible patch. If it's correct, then this issue will be fixed in the next minor release.