Trying to rotate an svg group by an amount deg in
data():{
deg: 90,
groupCenter: [100,200]
}
I have searched but can't find the correct syntax to bind data to the svg rotate function,
:transform="{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}"
I am trying to add this to a circle like this,
<circle style="mix-blend-mode: multiply;" v-for="(el,index) in element.coords" :fill="el.color" :key="index" :r="el.radius" :cy="el.y" :cx="el.x" :transform="{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}" />
I get,
- invalid expression: Unexpected token + in
{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}
Raw expression: :transform="{'rotate(' + deg + ' ' + groupCenter[0] + ' ' + groupCenter[1] + ')'}"
SOLUTION:
This worked for me using a method,
:transform="rotateShape(index)"
And the method,
rotateShape(){
return "rotate(" + this.deg + " 0 0)"
},
But I don't know why the initial attempt wouldn't work.
The transform attribute needs to evaluate to a string - i.e. transform="rotate(90deg)", so I think you need to concatenate some partial strings:
:transform="'rotate(' + deg + ' deg)'"
This is a great place to use javascript's template literals.
:transform="`rotate(${deg} deg)`"
Related
I am working on an HTTP fileserver and stumbled upon a problem with fs.readFileSync(). However, the function adds + signs which prohibits me from writing the value to another value.
(This is just to show what happens and does not represent the full functionality of the intended code)
samplejs.js
var content = fs.readFileSync("D:/sampleproj/example.txt", {encoding:"utf8"});
console.log(content);
output:
"\t'#0000CC',\r" +
"\n\t'#0000FF',\r" +
"\n\t'#0033CC',\r" +
"\n\t'#0033FF',\r" +
"\n\t'#0066CC',\r" +
"\n\t'#0066FF',\r" +
"\n\t'#0099CC',\r" +
"\n\t'#0099FF',\r" +
"\n\t'#00CC00',\r" +
"\n\t'#00CC33',\r" +
"\n\t'#00CC66',\r" +
"\n\t'#00CC99',\r" +
"\n\t'#00CCCC',\r" +
"\n\t'#00CCFF',\r" +
"\n\t'#3300CC',\r" +
"\n\t'#3300FF',\r" +
"\n\t'#3333CC',\r" +
"\n\t'#3333FF',\r" +
"\n\t'#3366CC',\r" +
"\n\t'#3366FF',\r" +
"\n\t'#3399CC',\r" +
"\n\t'#3399FF',\r" +
"\n\t'#33CC00',\r" +
"\n\t'#33CC33',\r" +
"\n\t'#33CC66',\r" +
"\n\t'#33CC99',\r" +
"\n\t'#33CCCC',\r" +
"\n\t'#33CCFF',\r" +
"\n\t'#6600CC',\r" +
"\n\t'#6600FF',\r" +
"\n\t'#6633CC',\r" +
"\n\t'#6633FF',\r" +
"\n\t'#66CC00',\r" +
The problem here is, of course, the + signs. How can these be "avoided"/removed?
I've tried to .split("+") but that doesn't work since the + signs aren't inside a pair of quotes.
the text file:
'#0000CC',
'#0000FF',
'#0033CC',
'#0033FF',
'#0066CC',
'#0066FF',
'#0099CC',
'#0099FF',
'#00CC00',
'#00CC33',
'#00CC66',
'#00CC99',
'#00CCCC',
'#00CCFF',
'#3300CC',
'#3300FF',
'#3333CC',
'#3333FF',
'#3366CC',
'#3366FF',
'#3399CC',
'#3399FF',
'#33CC00',
'#33CC33',
'#33CC66',
'#33CC99',
'#33CCCC',
'#33CCFF',
'#6600CC',
'#6600FF',
'#6633CC',
'#6633FF',
'#66CC00',
'#66CC33',
'#9900CC',
'#9900FF',
'#9933CC',
'#9933FF',
'#99CC00',
'#99CC33',
'#CC0000',
'#CC0033',
'#CC0066',
'#CC0099',
'#CC00CC',
Are you sure you are doing console.log?
I did console.log and didn't get any "+", but I got those when I use console.dir.
Anyway, these "+", are not part of the string and you can't remove them by using split.
And just use the string as if they were not there.
To get each line simply use:
const fs = require("fs");
let file = fs.readFileSync(__dirname + "/text.txt", { encoding: "utf8" });
const lines = file.split("\n");
[(0,
'0.011*"people" + 0.009*"christian" + 0.008*"god" + 0.008*"law" + '
'0.006*"believe" + 0.005*"question" + 0.005*"man" + 0.005*"life" + '
'0.005*"time" + 0.005*"write"'),
(1,
'0.014*"organization" + 0.013*"group" + 0.012*"image" + 0.010*"university" + '
'0.009*"program" + 0.008*"newsletter" + 0.007*"graphic" + '
'0.007*"information" + 0.007*"file" + 0.006*"box"'),
(2,
'0.015*"write" + 0.015*"organization" + 0.014*"article" + 0.012*"year" + '
'0.008*"university" + 0.007*"team" + 0.007*"time" + 0.006*"game" + '
'0.006*"give" + 0.006*"kid"'),
(3,
'0.049*"space" + 0.009*"year" + 0.008*"publish" + 0.006*"aerospace" + '
'0.006*"news" + 0.006*"technical" + 0.005*"satellite" + 0.005*"activity" + '
'0.005*"membership" + 0.005*"system"')]
How do I set the delimeter for the text file shown in the image? I want it to split into four separate text files. What and how should I give the start and end delimiter in the if() as can be seen in the code?. The text file has four separate parts 0,1,2,3. I am trying to write all the parts into separate text file.
`with open('topics.txt','r') as fo:
op=''
start=0
cntr = 1
for x in fo.read().split("\n"):
if (x==''):
if (start==1):
with open(str(cntr) + '.txt','w') as opf:
opf.write(op)
opf.close()
op=''
cntr+=1
else:
start=1
else:
if (op==''):
op = x
else:
op = op + '\n' + x
fo.close()`
If what you posted above is literally your text file, then this should give you each tuple separately.
I'm just using the regular expressions library. The pattern is just look for a left paren ( and run of anything that isn't a right paren, and then a right paren. Super simple.
import re
foo = """[(0,\n blahblahblah), (1,\n asdfasdf), (2,\n ghhgghiegiegieh)]"""
pat = r'\([^\)]+\)'
matches = re.findall(pat, foo)
['(0,\n blahblahblah)', '(1,\n asdfasdf)', '(2,\n ghhgghiegiegieh)']
If you want to separate out the numbers you can do that easily by spliting and striping out the extra stuff:
[i[1:-1].split(',\n')[1].strip() for i in matches]
#['blahblahblah', 'asdfasdf', 'ghhgghiegiegieh']
Then you can write them to whatever file you like.
PYTHON
I am making a calculator that displays formulas and answers of a few different things after you enter time, distance, mass, etc. Velocity works fine, but Speed and Acceleration are display apostrophes, commas, and parentheses. Some of them aren't even in the editor.
Output:
('Speed = Distance / Time = 1m / 1s', ' = 1m/s')
('Acceleration = Force / Mass = 1N', ' / 1kg = 1.0m/s/s')
Velocity = Speed + Direction = 1m/s + Direction = 1m/s North
The variables in the program:
SpeedFormula = 'Speed = Distance / Time = ' + distanceDisplay + ' / ' + timeDisplay, ' = ' + speedDisplay
AccelerationFormula = 'Acceleration = Force / Mass = ' + forceDisplay, ' / ' + massDisplay + ' = ' + AccelerationDisplay
VelocityFormula = 'Velocity = Speed + Direction = ' + speedDisplay + " + " + 'Direction' + ' = ' + VelocityDisplay
Anyone know why they display differently and how I can fix it?
Replace
timeDisplay, ' = ' + speedDisplay
with
timeDisplay + ' = ' + speedDisplay
When you use comma SpeedFormula becomes a tuple, not a string.
P.S. You should probably use formatting like this:
distanceDisplay = 20
timeDisplay = 2
speedDisplay = 10
SpeedFormula = 'Speed = Distance / Time = %d / %d = %d' % (distanceDisplay,timeDisplay,speedDisplay)
I would like to add different shapes depending on one of the properties in my json file. I found this approach by Mike:
https://groups.google.com/forum/#!topic/d3-js/4EJDu1xOh8Y
The idea is great, I'm just not sure how to adapt it. I either want to add a circle or an svg:use element (with attr("xlink:href")). They both have (of course) different attributes. So how do I do that? What do I append? In the example, the attr("d") was also used, do I need that also?
That's what I have so far but I'm not sure what to add where.
I really appreciate your help!
var type = d3.scale.ordinal()
.domain(["Q", "C"])
.range("circle","svg:use");
for(l=0;l<4;l++){
currentsvg.selectAll("path")
.data(queryArray[l])
.enter()
.append("svg:path")
.type(function(d,i) {
if (queryArray[l][i].name.substr(0,1) == "Q"){
return type("Q");
}
else if (queryArray[l][i].name.substr(0,1) == "C"){
return type("C");
}
});
}
Below is a different solution without filtering that uses the path to draw the shapes. It doesn't use the "rect" or "circle" of svg but rather just uses the path to draw the shapes. Check out here for more on paths. Note that the circle is two connecting arcs. It also classes each shape based on the data so you can have different colors, etc using CSS. Here is a fiddle.
currentsvg.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d",function(d,i){
var path,
s = i*50,
r = 10,
w = r*2;
if (data[i] == "Q"){
path = "M" + s + " " + s + " L" + s + " " + (s+w) +
" L" + (s+w) + " " + (s+w) + " L" + (s+w) + " " + s + "Z"
}
else if (data[i] == "C"){
path = "M" + s + " " + s + " m" + -r + ", 0 " +
" a " + r + "," + r + " 0 1,0 " + r*2 + ",0" +
" a " + r + "," + r + " 0 1,0 "+ -r*2 + ",0"
}
return path;
})
.attr("class", function(d){return d == "Q" ? "rec" : "circ";})
The best way to do that is to filter the data how you want into separate data sets for each shape before you create shapes. Then you can create the shapes with that new data set.
var data = ["Q","Q","Q","C","C","Q","Q","C","Q","C"];
var circleSet = data.filter(function(d){return d === "Q";}),
squareSet = data.filter(function(d){return d === "C";});
As Lars said, that is also not how the d attribute works. Here is a working JSFiddle of the whole thing.
So I have this javascript function:
function show_courseline (course_index, repeats) {
var s = "";
var count = 0;
while (count < repeats) {
s = s + 'Number: ' + document.getElementById(course_index + count + 'a').innerHTML + '\n' +
'Semester: ' + document.getElementById(course_index + count + 'b').innerHTML + '\n' +
'Year: ' + document.getElementById(course_index + count + 'c').innerHTML + '\n' +
'Title: ' + document.getElementById(course_index + count + 'd').innerHTML + '\n' +
'Units: ' + document.getElementById(course_index + count + 'e').innerHTML + '\n' +
'Description: ' + document.getElementById(course_index + count + 'f').innerHTML + '\n';
++count;
}
alert(s);
}
But I get an error when I run it through an "onclick" input box. It has nothing to do with the document ids not being there, because they are.
Is course_index integer? If it is course_index + count is an integer and I know that ids cannot start with a digit