I'm working on a webpage and I want to visualize a certain tree structure.
I bumped into this beautiful D3.js tree (http://bl.ocks.org/robschmuecker/7880033), but I'm having trouble importing it into my project since there are several ways (dg3-ng2 for example).
D3.js is a javascript-libary - and Angular works with typescript.
How do I integrate that certain tree into my project so that I also can modify it without any trouble afterwards?
I do have several questions like:
Where do I import the .js and the .json file?
Do I have to convert the javascript code into typescript manually?
Should I write the .js code into a .ts file?
Should I make a reference in my index.html?
Should I make use of a D3-Service?
As you can see I'm quiet confused.
If you use Angular, it's simple)
Istall d3 from npm.
Import d3 in component like that:
import * as d3 from 'd3';
And write you logic, use d3 syntaxis, example:
constructor(private element: ElementRef) {
this.htmlElement = this.element.nativeElement;
this.host = d3.select(this.element.nativeElement);
}
You graphic is a component, in you component descrite functions to build svg, draw axis and etc.
Then on init of component call methods that you describe, example:
ngOnInit(): void {
this.setup();
this.buildSVG();
this.drawFirstPlanRects();
this.drawSecondPlanRects();
this.drawXAxis();
this.drawYAxis();
this.drawCrossLines();
}
I'd strongly recommend using angular-cli since when you install the d3 library you won't have to deal with the boiler plate of hooking it into the app properly. You'd just need to import it into your ts document like the above example shows. On importing the json there are several different ways that it could be handled. You could just store the json in a variable in the .ts file, you could store it in a static json document that you then host along with the app and there a many examples of pulling files and loading json data out there already.
You don't have to convert any of the js code you have since ts is essentially js with types, though you might have to declare an any type for some things, but if you want ts code you will have to manually convert or find a ts example. I'd strongly recommend a good IDE that is compatible with ts. It'll do a lot of the heavy lifting of finding mistakes.
It's rather difficult to answer that question since I don't know the specs of your project. Generally if you are doing a one off thing that does't need angular I'd just keep it simple with js and drop the usage of angular. If this is part of a larger app though I'd recommend writing it in ts since angular2+ is written in ts and most examples you find online will be in ts.
If you are using angular-cli you won't need to make a reference in your index.html file
I'm not sure what you are asking here.
From the questions you are asking I'd strongly recommend really looking at angular and learning how to properly create an app with it and then figure out how to integrate d3 int the project, since some of the questions you are asking aren't related to just working with d3 in angular.
Related
I'm learning JavaScript and using AWS SDK from JavaScript.
Reading an IAM example from the documentation, i saw the following pattern:
Create a file name iamClient.js where you instantiate an object and export it.
Create another file where you import the client created above to use it.
What is the main benefit of doing this instead of just create and use the object in the same file ?
I know this is a small example and maybe there is no issue doing everything in the same file, but i'm more curious if this is just for organization/best practice if something bigger is created based on this sample or if there is some sort of technical reason. :)
Well, that's how you'd create a configuration singleton for instance in another language.
Creation of such object might be expensive in time sometimes so you create it once and then just reuse it :)
During testing, if you provide a mock for your iamClient module you're set for all unit-tests (assuming you're using Jest or similar)
It also helps you to not repeat yourself as it's a codesmell
I am pretty new to coding and I am currently trying to solve a challenge from frontendmentor.io where my task is to build an ip-address-tracker.
To make this task a little bit more difficult for me, I am trying to build this app with the React framework via create-react-app.
My problem is, that my Javascript file, script.js, somehow isn't working. I am trying to implement it via the script-tag in my index.html.
<script src="../src/script.js"></script>
You can also check out the directory structure, I just updated the project on GitHub.https://github.com/bryanhain97/ip-address-tracker
Thanks a lot.
If you want to include a script in your index.html file in react you'll have to put it into the public folder and specify the path by using %PUBLIC_URL%/path-to-script-relative-to-public-dir
EDIT:
I just looked at your project and what you should do instead of embedding your script in index.html is to import it into index.js. You should probably export the initMap function and call it from index.js
OK. there are a couple of things you did wrong! First of all, React outputs some useful information in the console that is not negligible in case of failure. Please look at the following image.
It is clear that React is complaining about a missing React import. This is because you need to
import React from 'react'
even in a function component. I found this mistake in two places.
The URL you're using in your script.js file is wrong. Please see the git diff over my working directory below.
I don't know how you want to implement all this but I think this is not done THE REACT WAY! React is a component oriented library so, Please check some other alternatives like instead of doing all this in flat functions using direct connections to your DOM element. ReactDOM has some super power to be leveraged here.
I managed to get the application work on my own IP address and Google's (see the screen captures below), though I think you didn't implement it in the REACT WAY. So, keep digging!
[React Error Output][1]
[Git diff of my work space with the fixes][2]
[Working App on my IP Address][3]
[Working App on Google's IP Address][4]
[1]: https://i.stack.imgur.com/gZB72.png
[2]: https://i.stack.imgur.com/xHqfU.png
[3]: https://i.stack.imgur.com/8BEzI.png
[4]: https://i.stack.imgur.com/xZENI.jpg
I created a angular library with angular 9 cli. What I noticed: I can only include modules by loading the whole library:
Of course this makes no sense in a real world application. I want to be able to load each module individually. What am I doing wrong? Why can't he find the image component under #devmonkeys/mark6/image
I linked the repository because I don't know exactly what it is. I think this makes more sense than posting the code of 6 possible files here.
What I mean exactly: #angular/material for example, each component has its own path to avoid loading the whole library into the app during build. https://material.angular.io/components/button/api as an component namend MatButton. to import it we must use: {MatButtonModule} from '#angular/material/button'; i also want this, because it makes no sense to load the whole libary in my code only because i want 1 component.
I'm new to Typescript and after reading some related articles it seems that by using Typescript in React, propTypes definitions are no longer needed.
But by checking some of the most populars React Component Libraries projects
like Material-IU:
/packages/material-ui/src/Button/Button.js
/packages/material-ui/src/Button/Button.d.ts
or Semantic UI React
/src/elements/Button/Button.js
/src/elements/Button/Button.d.ts
or React Toolbox
/components/button/Button.js
/components/button/Button.d.ts
...it seems some big projects are using both.
So, i'm a bit confused about this. And i don't really get the purpose of these *.d.ts files
Why are they using both? What is the purpose of the *.d.ts files?
How does this fit in a react development workflow?
My actual idea about this this is that:
*.d.ts should contain the types for the component's props
typescript will launch compilation errors if some prop is receiving a wrong type of data
the React component definition can avoid defining the propTypes (as this is handled now by Typescript in a different file)
Is this correct?
Can anyone shed some light on this? :)
Thanks in advance!!
The TypeScript definition (.d.ts) files define the type information used by the TypeScript compiler, and in many IDEs these files are also used to provide feedback during development. Aside from the definitions provided by vendors, you can use interfaces when writing your React components in TypeScript. A common use case is to define the type of the props object.
One benefit of using a interface, as opposed to defining propTypes, is that this code disappears at runtime, so if you pass the right props you don't need to run any type checks in the compiled version of your app.
That said, there are situations where it is still helpful to check the type of props passed to a component at runtime. For example, maybe you are using data from an external API and wanted to make sure that the format is what you expected. In this case, it would make sense to use propTypes.
Also, as rightly pointed out in the comments, the propTypes are useful when the library is consumed by code written in JavaScript, which would use a compiled version of the code that would otherwise lack the type information.
Most of what I use javascript for is d3 and the rest of my javascript knowledge was self learned by looking at examples, reading docs, etc. The point is my "in-depth" knowledge of javascript is not so deep...
Since I mostly work with d3 I have written a lot of my own functions and closures (as suggested by Bostock in Towards Reusable Charts) which build on top of d3.
To keep track of all the code I have written them in separate files and to use my collection I have tried a few ways such as dynamically appending script tags to the head of the document, concatenating files, etc
Ideally, I should make proper module of my code and bundle it together.
So I have set off on that path and stumbled across rollup and this tutorial by Lengstrof.
I tried following it and got it to work with some minor changes (e.g. it assumes babel-core is already installed and currently there is an issue with postcss.
Anyway, I made a small repo to demonstrate my use case (project repo). It has some modules which includes helper functions, some prototypes, and some closures.
Ideally, these would all be exported into a closure / object just like d3 (e.g. myClos) where I could then call any of the functions I have written.
Unfortunately, I have no idea how to do this and did not find relevant examples / tutorials on how to do this. Also, in doing this, would I have to then call my helper functions like myClos.helper1().
Anyway, I would greatly appreciate your help. The ideal end would be to have the rolled-up file myclos.min.js work like d3 where I include the script tag and then myclos is in the global-namespace.
Many thanks in advance for you assistance.
Make sure you're following the appropriate format for importing/referencing your external helpers/modules (e.g., from your main file: (esmodules) import foo from './helper1'; console.log(foo.helper1()) or (commonjs) const foo = require('./helper1'); console.log(foo.helper1()).) In the module you're trying to export from (helper1): (esm) export default helper1, (cjs) module.exports = helper1. The Rollup docs have good examples of this.