There is plenty of content online about using Ember.js with D3.js, particularly with making D3 visualizations as Ember Components. This is something I need to do for a project, but I'm much more familiar with D3 than I am with Ember.
Specifically, I'm using a D3 force layout whose nodes/vertices need to be interactive. More specifically, right-clicking a node needs to expose a context menu whose entries have the following requirements:
Each menu entry needs to link to a Route of our Ember App
Actions and appearance of the menu entries depends upon the data bound to the right-clicked node (and possibly the data bound to the nodes edges and neighbors)
I'm a bit overwhelmed by the number of choices in front of me, but here is my main question:
How can I generate SVG elements with D3 that link to Ember Routes?
Related
I am working on my first extensive MERN project and part of the functionality involves specific components (like a checkbox to-do list, images, text, ets...) that then allow the user to build out different pages, larger multi-checkbox aggregation lists, etc... Think of it as something like https://www.notion.so/notes.
Building the individual react components and configuring them on static pages is straightforward. However, I'm having a hard time conceptually understanding how to take those components and then dynamically allow users to build out custom pages using them.
In a broad sense, how do page builders functionally work?
Here is a broad idea. You will need a page where the left side lists all your UI components [thump nails] and the right side area for dragging and dropping those compoents. You will need a grid system with rows and columns components like Bootstrap Grid or MUI Grid dividing space into 12 portions for the layout of any page. You should let each dropped component give an option to accept its props so users can set it. Setting props can be another component.
When they save the design you should get the react component tree of what they are saving along with all properties and save it in your DB. You should be able to generate both the design view and the actual view with those saved data.
It was easy to say but I know it's a lot of work. I have seen similar work done using Angular and .NET.
I'm trying to understand how to integrate D3 and React. Specifically I'm trying to understand how using D3 to render visualizations impacts React. As explained in this excellent question and it's reply:
[...] there is currently no great way to work with React and D3 [...] this is because in the React world you don't do direct DOM manipulation, but in the d3 world that's the only thing you do.
The reply goes on to say
It seems to me that the current consensus for Force Layouts and the
like is to simply drop out of React for those components and let d3 do
its thing. This isn't ideal but it's way more performant.
What is the impact on React from letting D3 take care of rendering? Will it only impact the performance of the component using D3, or other components as well? Will direct manipulation of the DOM using D3 screw with React's virtual DOM in some way for example? I'm basically trying to get an idea of the price you have to pay for using D3.
I've worked on a project (private, unfortunately) where I used D3 to represent a UML editor. Everything used SVG manipulation to draw an SVG representing the UML.
The Editor UI logic was implemented in a unique React element (UMLEditor), using TypeScript and D3. You could pass the editor properties to set changes in the UML, and callbacks to get back the data. For instance, you can drag and drop a UML class (in 60fps), but the UI only triggers two events (drag, and drop) to React callbacks.
The key is to have the logic and events separated from the UI manipulation, and have a small amount of big react elements, and not so many small elements.
It could manage a UML with around 4K classes in 30fps.
Edit: Let's define a small application.
You have small react components with its children, like the root App element, a Navigation bar, a viewport, etc...
Every element but the UMLEditor have a small impact on the performance. UMLEditor element is a complex element without any React children. Every UI element inside it is rendered using D3. The real DOM of UMLEditor contains a complex SVG element managed entirely using D3.
To make this element interact with React, we pass as props callbacks for events like drag, drop, create new UML class... and one JavaScript class with all the D3 render logic.
We don't pass as prop the entire UML configuration, as it would have a negative impact on the performance. Instead, when we needed it for exporting purposes, the JavaScript class passed as a prop can give the whole UML configuration using a method.
I am trying to do some R&D work around for my web app.
In the preceding image I have described my requirement. let say I have some custom web components like components 1, components 2 etc in the left side. Users should be able to drag and drop components into the play area and should be generate predefined some xml or text snippet belong to that component and that generated value should be store in the variable for later use. Currently I am using Angular and JS and HTML languages to achieve my requirement. I know I can use HTML5 drag and drop feature for items. But how can I generate some code snippet or text belong to that dragged items?
I want to dynamically add data into data.js in my JavaScript Windows 8 app based on the grid app template. I want some particular group items in that template to scroll from right to left. And also how to flip images of particular tile inside the group items?
For the question of adding data dynamically, I would check out the following samples:
HTML ListView loading behaviors sample
HTML ListView optimizing performance sample
More samples may be found at: http://code.msdn.microsoft.com/windowsapps
For the latter question, I'd suggest posting a separate question on the image manipulation, with some additional detail on what you're trying to do.
For more info on Windows Store app development, register for Generation App.
Sencha Touch seems like an amazing way to develop mobile apps. I've seen posts by people incorporating Jquery, D3.
At the same time the posts describing customizing controls seems to be fairly narrow.
Adding the picture of a kitten next to the slider and labeling the slider seems kinda tame compared to what ios can do in terms of custom controls, at least in terms of examples available. Most blog posts imply you can extend the control objects in Sencha or the CSS file.
These posts are not quite what I'm looking for - that's my problem. I can't see any examples of anyone changing default controls in Sencha touch, but they make it sound as if it might be possible to do anything.
This is my question:
Is Sencha Touch able to build an iOS or Android App incorporating any javascript library or HTML5? Are there any limitations here?
To give an example I trying to implement a custom slider, where a touch along a continuous line or a circle like this color selector will enter new values. Further if you incorporate a library like protovis or D3 (or Raphael charts) can Sencha display anything the graph canvas element will otherwise display? Will it take touch input and interact with the graph libraries the way that the HTML5 graph does?
The post you mentioned is not about customizing controls, it's about displaying a list from bound store, instead of of using just Ext.XTemplate (the system with Ext.view.View) to generate HTML, it uses ComponentView to generate Ext.Components instead.
It's hard to tell what you're asking, what in particular are you trying to do?
To address some of the questions you added:
Charts in Sencha are implemented using Raphael, which uses SVG, therefore all the elements in the chart can be interacted with using HTML events.
Everything that Sencha generates is valid HTML, you can listen to HTML events, but components usually abstract the lower level events into something that is easier to consume, (for example a data view abstracts the click so that it passes the record being clicked along with the event).
Therefore, the answer to the question is, YES, Sencha can co-exist with regular HTML. If you want the full benefit of the framework, you should always create an Ext.Component so that your components can be easily used within the framework's layout containers.
It's very easy to misuse Ext when trying to write regular HTML and still place that within the layout rendering pipeline. Ext.Component has a built in way of creating HTML out of templates, see http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-data and http://docs.sencha.com/touch/2-0/#!/api/Ext.Component-cfg-tpl