React JSX Dynamic SVG Translate Error - javascript

I'm new to React and trying to do a dynamic Svg Transition where I translate the Position of a Group according to the current Component State. For some reason I get the Error Message:
DOMPropertyOperations.js:139 Error: <g> attribute transform: Expected
'(', "translate:(100 100)".
Here is the render function:
render() {
let turns = Route.Leg.map((turn) => <circle cx={turn.to.location.latitude} cy={turn.to.location.longitude} r="5"></circle>)
let legs = Route.Leg.map((leg) => <line x1={leg.from.location.latitude} y1={leg.from.location.longitude} x2={leg.to.location.latitude} y2={leg.to.location.longitude} stroke="black"></line>)
let move = "translate:(" + this.state.pos.location.latitude + " " + this.state.pos.location.longitude + ")";
return (
<div>
<svg width="800px" height="800px">
<circle cx="400" cy="400" r="10"></circle>
<g transform={move}>
{turns}
{legs}
</g>
</svg>
</div>
);
}
The lines and circles are drawn correctly, and when I log the "move" variable and looks correct every time the dom updates. When I hardcode the translate it also works. Does someone have an idea what is wrong here, or am I just missing something? Cheers in advance

As says in the error Expected (',...
// Look down, there is no ":" character in css syntax. And check for ","
let move = "translate(" + this.state.pos.location.latitude + "," + this.state.pos.location.longitude + ")";
That's because of you are using wrong syntax. You should use translate(... not translate:(....
Also you should comma seperate values inside translate

Related

I want to make a random colorBox with colorcode [duplicate]

This question already has answers here:
Random color generator
(64 answers)
Closed 11 months ago.
thanks for coming here to help me.
I'm a very beginner of programmer. I want to make a js code about the random colorcode. ex)colorcode means #556549 like that.
My intention is
first, to make a array with random colorcode,
and second, to pick up the one colorcode and use that code to one part.
And other part has the another colorcode.
It means the code below, "???" needs your help..
<<<<. style="file:???" >>>>
here is my code,
<g
**id="strokes"
var colorBox = ["#D8FCBE", "#B6EECF", "#F9FDE1", "#FFE9EA", "#CCEDE4", "#A6D2E1", "#A8A6DB", "#D3BAE9", "#F3D0F5", "#FFE7F7"]
var randomColor = Math.floor(Math.random() * colorBox.length)
return randomColor
<path
style="file:"randomColor;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
id="path2"
<path
style="file:randomColor;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
id="path4"
<path
style="file:randomColor;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
id="path6"
style="fill:green;stroke:#000000;stroke-width:3;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1"
id="path8"
It is impossible to do this because HTML and CSS is not for dynamic things. You have to use JS to do this.
<g id="strokes">
<path id="path2" class="paths">
<path id="path4" class="paths">
<path id="path6" class="paths">
<path id="path8" class="paths">
</g>
window.addEventListener('load', () => {
document.querySelectorAll('.paths').forEach(elem => {
const colorBox = ["#D8FCBE", "#B6EECF", "#F9FDE1", "#FFE9EA", "#CCEDE4", "#A6D2E1", "#A8A6DB", "#D3BAE9", "#F3D0F5", "#FFE7F7"]
elem.style.fill = colorBox[Math.floor(Math.random() * colorBox.length)]
})
})

SVG animation controlling by Aurelia

I have a problem with an animation controlled with Aurelia.
app.html
<path
style="fill:none;stroke:#000000;stroke-width:3"
d="M 1.6443859,34.308976 C 0.37273852,24.831561 7.0248286,16.117725 16.502244,14.846077 25.979658,13.574431 34.693495,20.226519 35.965142,29.703934 37.236789,39.181349 30.5847,47.895186 21.107285,49.166833 15.541877,49.913581 10.23978,47.927929 6.5533998,44.242297"
>
<animateTransform
attributeName="transform" attributeType="XML" type="rotate" from.bind="fromCW"
to.bind="toCW" dur.bind="duration" fill="freeze"
/>
</path>
<button repeat.for="state of states" click.trigger="changeState({state})">${state}</button>
app.ts
states = ["opening", "closing"];
duration:string = "10s";
rotationPoint: string = " 18.9 32.05";
rightRotation = -95 + this.rotationPoint;
leftRotation= 130 + this.rotationPoint;
zero = 0 + this.rotationPoint;
state:string;
fromCW:string;
fromCCW:string;
toCW:string;
toCCW:string;
domeAnimate(): void{
switch (this.state){
case "opening":
this.fromCW = this.fromCCW = this.zero;
this.toCW= this.leftRotation;
this.toCCW = this.rightRotation;
break;
case "closing":
this.fromCW = this.leftRotation;
this.fromCCW = this.rightRotation;
this.toCW = this.toCCW = this.zero;
break;
}
}
changeState(id):void {
this.state = id.state;
this.domeAnimate();
}
Here is how does it look like
Right now the animation starts when the button is clicked. i.e: when I click the "Opening" button the opening animation starts, then switch to "Closing" and the closing animation is in the middle. When the animation is done I am not able to run it again.
What I'd like to do it here is to start the proper animation (opening or closing) when I click the button connected to it everytime I click it.
I don't want to use SVG.beginElement() here.
Thanks
The issue you got is because SVG animation via <animateTransform/> by default is run only once. Try adding an attribute repeatCount="indefinite", it will work as expected.
Here is a link to a working version https://stackblitz.com/edit/aurelia-javascript-p77wvh?file=src%2Fapp.js

Using a random color for an SVG being exported as a React Component

I have three SVGs that I'm using as React components. The three SVGs are currently being saved as JavaScript files. They are being used like this:
import React from 'react';
import PictureA from '../components/SVGs/PictureA.js'
import PictureB from '../components/SVGs/PictureB.js'
import PictureC from '../components/SVGs/PictureC.js'
const IndexPage = () => (
<div className="mainArea">
<PictureB />
<PictureA />
<PictureC />
</div>
)
export default IndexPage
The above part works fine. Within, for example, PictureA.js, I would like to have something like this happen:
import React from 'react';
export default function PictureA(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
svg width = "12rem"
height = "auto"
version = "1.1"
viewBox = "-10 -110 100 250"
preserveAspectRatio="xMinYMax slice">
<g transform="translate(-2.202509394435669,-16.15250659108221)"
fill = "FILL THIS WITH A RANDOM COLOR"
fill-opacity = "0.90087" >
<path
d="very long path" />
</g>
</svg>
);
}
I have an array of pre-selected colors, and it's no problem to select from that array. The problem I'm having is in inserting a color once selected into:
fill = "FILL THIS WITH A RANDOM COLOR"
I've been trying to save the randomly selected color as a variable and populate it directly inside the tag. After doing some research, I get the feeling that's the wrong approach. But if there is a way to make that work, that would be optimal. If that isn't the right approach, I would still really appreciate any help making the randomization work within the PictureA.js file. It would be best to have the SVGs self-contained, if that's possible.
Thanks very much!
Have you tried passing a generated color as a prop?
fill = { props.color }
And then call it as
<PictureA color={ chooseRandomColor() } />
[EDIT] If you want this to be self-contained, you can also just inline the call to the random color generator:
return (
<svg
xmlns="http://www.w3.org/2000/svg"
svg width = "12rem"
height = "auto"
version = "1.1"
viewBox = "-10 -110 100 250"
preserveAspectRatio="xMinYMax slice">
<g transform="translate(-2.202509394435669,-16.15250659108221)"
fill = { chooseRandomColor() }
fill-opacity = "0.90087" >
<path ... />
)
}
You can inline JavaScript by surrounding it with { } tags in React JSX templates. See here in the react docs for an example.

D3JS selection selectAll

I have this piece of code :
var series, seriesChildren;
selection.each(function (data) {
series = d3.select(this).selectAll('.my-series').data([data]);
series.enter().append('g').classed('my-series', true);
console.log(data);
seriesChildren = series.selectAll('.seriesChild')
.data(data, function (d) {
return d.x;
});
seriesChildren.enter()
.append('g')
.classed('seriesChild', true);
}
And I don't understand why it gives me the following :
<g class="my-series"></g>
without the children.
It should be :
<g class="my-series">
<g class="seriesChild"></g>
<g class="seriesChild"></g>
...
</g>
I did a console.log(data) and my data is good, it has thousands of elements within it.
It is working by doing seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild') but not working with seriesChildren = series.selectAll('.seriesChild')
I'm using D3JS v4.
These two statements are diffrent
1. seriesChildren = series.selectAll('.seriesChild')
2. seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild')
In 1st series is not a DOM element hence seriesChildren = d3.selectAll('.my-series').selectAll('.seriesChild') will not work as you are expecting
whereas in second case d3.selectAll('.my-series') this represent a DOM element and furter d3.selectAll('.myseries').selectAll('.seriesChild') will select another DOM element.

Rendering SVG with no container in Plastiq

I'm using Plastiq to create a simple icon component that renders SVG:
module.exports = function(icon) {
return h.rawHtml('.icon',
'<svg><use xlink:href="#i-' + icon + '"></use></svg>'
);
}
I'm using rawHtml since SVG isn't supported yet. This returns the HTML:
<div class="icon">
<svg>
<use xlink:href="#i-example"></use>
</svg>
</div>
I would prefer the HTML:
<svg class="icon">
<use xlink:href="#i-example"></use>
</svg>
But this doesn't work:
module.exports = function(icon) {
return h.rawHtml('<svg class="icon"><use xlink:href="#i-' + icon + '"></use></svg>');
}
Nor does this:
module.exports = function(icon) {
return h.rawHtml('svg.icon',
'<use xlink:href="#i-' + icon + '"></use>'
);
}
Or this:
module.exports = function(icon) {
return h('svg.icon',
h.rawHtml('<use xlink:href="#i-' + icon + '"></use>')
);
}
Looks like rawHtml requires an element selector Plastiq has support for? Is there a recommended approach for this?

Categories