I am using react-d3-graph for rendering DAG thats hierarchical / layered.
e.g.
Layer-1 [ n1]
Layer-2 [ n11, n21 ]
Layer-3 [ n111, n112][n121,122]
.... and so on.
While I am able to get force graph using sample examples provided (see below), I don't see an option to provide layering or hierarchy like DAG onto graph. What can be done in this case?
React Code:
import React from "react";
import { Graph } from "react-d3-graph";
import { data } from "./sampleGraphData";
import './App.css';
function App() {
const myConfig = {
"automaticRearrangeAfterDropNode": true,
"collapsible": true,
"directed": true,
"focusAnimationDuration": 0.75,
"focusZoom": 1,
"freezeAllDragEvents": false,
"height": 800,
"width": 600,
"highlightDegree": 2,
"highlightOpacity": 0.2,
"linkHighlightBehavior": true,
"maxZoom": 12,
"minZoom": 0.05,
"nodeHighlightBehavior": true,
"panAndZoom": false,
"staticGraph": false,
"staticGraphWithDragAndDrop": false,
"d3": {
"alphaTarget": 0.05,
"gravity": -250,
"linkLength": 120,
"linkStrength": 2,
"disableLinkForce": false
},
"node": {
// "color": "#d3d3d3",
color: "lightgreen",
"fontColor": "black",
"fontSize": 10,
"fontWeight": "normal",
"highlightColor": "red",
"highlightFontSize": 14,
"highlightFontWeight": "bold",
"highlightStrokeColor": "red",
"highlightStrokeWidth": 1.5,
"mouseCursor": "crosshair",
"opacity": 0.9,
"renderLabel": true,
"size": 200,
"strokeColor": "none",
"strokeWidth": 1.5,
"svg": "",
"symbolType": "circle"
},
"link": {
"color": "lightgray",
"fontColor": "black",
"fontSize": 8,
"fontWeight": "normal",
"highlightColor": "red",
"highlightFontSize": 8,
"highlightFontWeight": "normal",
"labelProperty": "label",
"mouseCursor": "pointer",
"opacity": 1,
"renderLabel": false,
"semanticStrokeWidth": true,
"strokeWidth": 3,
"markerHeight": 6,
"markerWidth": 6,
"strokeDasharray": 0,
"strokeDashoffset": 0,
"strokeLinecap": "butt"
}
}
return (
<div id="app">
<h1 className="header">
<span className="title">[DAG example]</span>
</h1>
<Graph
id="graph-id"
// data={d3graph}
data={data}
config={myConfig}
/>
</div>
);
}
export default App;
Resulting graph:
Desired Graph:
Related
I'm new to reactjs, doing a small react app which should hold first letter of User's firstname and lastname using json data in reactjs. but i'm unable to do it... I getting functions for static data but not for dynamic.
json data:
[
{
"id": 1,
"firstname": "Avelino",
"lastname": "Cajes",
"position": ".Net Developer",
},
{
"id": 2,
"firstname": "Nilson",
"lastname": "Audrey",
"position": "C#",
}
]
Can anyone help me to do this problem? Thanks in advance.
I want in this way
Install react-avatar:
npm install react-avatar
Then try adapting this code to suit your use case
import React from "react";
import Avatar from 'react-avatar';
let data = [
{ "id": 1, "firstname": "Avelino", "lastname": "Cajes", "position": ".Net Developer"},
{ "id": 2, "firstname": "Nilson", "lastname": "Audrey", "position": "C#", }
]
class MyComponent extends React.Component{
state = {data}
render(){
return(
<div>
{ this.state.data.map(item=>(
<Avatar name={item.firstname+" "+item.lastname} maxInitials={2}/>
))
}
</div>
)
}
}
You can find out more on how to use react-avatar here
I think this is what u asked for
pass this to text element: firstName.charAt(0).toUpperCase() +""+lastName.charAt(0).toUpperCase()
import { LinearGradient } from 'expo-linear-gradient';
<LinearGradient colors={['#4c669f', '#3b5998', '#192f6a']} style=
{styles.linearGradient}>
<Text style={styles.buttonText}>
</Text>
</LinearGradient>
// Later on in your styles..
var styles = StyleSheet.create({
linearGradient: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
borderRadius: 5
},
buttonText: {
fontSize: 18,
fontFamily: 'Gill Sans',
textAlign: 'center',
margin: 10,
color: '#ffffff',
backgroundColor: 'transparent',
},
});
I need the text in this graph to stay center wrapped but it goes horizontal instead. Had anyone had this issue with chartjs?
Picture of the graph
It works if you used a set amount of letters such as 'dummy'.
datasets: {
labels: ["Dummy text 1", "Dummy text 2", "Dummy text 3"],
datasets: [
{
label: "",
data: [13, 11, 2],
backgroundColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderColor: [
"rgba(0, 135, 136)",
"rgba(0, 193, 189)",
"rgba(255, 9, 49)"
],
borderWidth: 1
}
]
Fixed this easily with a multi-array and changing the xaxes. Here's the example fix -
labels: [
["Dummy", "Data 1"],
["Dummy", "Data 2"],
["Dummy", "Data 3"]
],
xAxes: [
{
ticks: {
maxRotation: 0,
minRotation: 0
},
}
]
Hopefully this helps someone out :)
scales: {
xAxes: [
{
ticks: {
callback: function (label, index, labels) {
if (/\s/.test(label)) {
return label.split(' ');
} else {
return label;
}
}
}
}
]
This callback function will split your X Axis labels on the basis of space and arrange all the words in a wrapped manner. You can use the same function for Y axis values as well
I have created a network topography map using react-3d-graph and I am trying to access functions which are native to react-3d-graph outside of the graph itself. For example, I have a button which needs to utilize highlight behavior to highlight an individual node and its related nodes/links. Is there a way to do this? Here is the code for the graph:
const myConfig = {
"automaticRearrangeAfterDropNode": false,
"collapsible": true,
"height": 700,
"highlightDegree": 1,
"highlightOpacity": 0.2,
"linkHighlightBehavior": true,
"maxZoom": 8,
"minZoom": 0.1,
"nodeHighlightBehavior": true,
"panAndZoom": false,
"staticGraph": false,
"width": 1100,
"d3": {
"alphaTarget": 0.05,
"gravity": -200,
"linkLength": 300,
"linkStrength": 1
},
"node": {
"color": "#57a3ff",
"fontColor": "black",
"fontSize": 12,
"fontWeight": "bold",
"highlightColor": "red",
"highlightFontSize": 12,
"highlightFontWeight": "bold",
"highlightStrokeColor": "SAME",
"highlightStrokeWidth": 1.5,
"labelProperty": "name",
"mouseCursor": "pointer",
"opacity": 1,
"renderLabel": true,
"size": 450,
"strokeColor": "none",
"strokeWidth": 1.5,
"svg": "",
"symbolType": "square"
},
"link": {
"color": "#d3d3d3",
"opacity": 1,
"semanticStrokeWidth": false,
"strokeWidth": 4,
"highlightColor": "blue"
}
};
And here is the Graph component.
<Graph
id="graph-id"
data={data}
config={myConfig}
onClickNode={this.props.toggle}
onClickGraph={onClickGraph}
onClickLink={onClickLink}
/>
The function I am trying to access is "nodeHighlightBehavior". Is there a way to do this?
I have own vector tile from PGRestAPI, url like below
"http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"
and I try use mapbox-gl.js to render the map, but nothing display.
I am doing wrong? thx
var style = {
"version": 8,
"sources": {
"countries": {
"type": "vector",
"tiles": ["http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"],
"maxzoom": 6
}
},
"glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
"layers": [{
"id": "background",
"type": "background",
"paint": {
"background-color": "#ddeeff"
}
},{
"id": "country-glow-outer",
"type": "line",
"source": "countries",
"source-layer": "country",
"layout": {
"line-join":"round"
}
}]
};
var init_lat = 1.3552799//42.299228067198634;
var init_lng = 103.6945413;//-83.69717033229782;
mapboxgl.accessToken = 'mapbox-token';
var map = new mapboxgl.Map({
container: 'map',
style: style,
center: [init_lng,init_lat],
zoom: 15
});
edit 1:
after debug mapbox-gl-js code, now can see several circles. I modify the style, the source-layer name from pbf must be correct.
but not display all the points, it seems filtered?
var style = {
"version": 8,
"sources": {
"cleantech": {
"type": "vector",
// "url": "mapbox://map-id"
// "url": "http://tileserver.com/layer.json",
"tiles": ["http://192.168.1.4:3001/services/postgis/cleantech2/geom/vector-tiles/{z}/{x}/{y}.pbf"],
"maxzoom": 6
}
},
"glyphs": location.origin+location.pathname+"font/{fontstack}/{range}.pbf",
"layers": [{
"id": "cleantech2_geom_id",
"type": "circle",
'source': 'cleantech',
'layout': {
'visibility': 'visible'
},
'paint': {
'circle-radius': 8,
'circle-color': 'rgba(55,148,179,1)'
},
'source-layer': 'cleantech2_geom'
}]
};
edit 2:
change the maxzoom to 22, all data displayed. lets drink!
Is there any angularjs library that can draw a chart with stacked bars + lines? Like this:
I'm looking for any library that supports this, with angular directives. I've found angular-nvd3-directives, that supports multicharts (combined chart types), but I don't think it supports bar stacking, only grouping.
I know that these questions are not well suited to SO, I'm looking for ANY, ONE, lib, not recommendations. (also it has to be free for commercial use)
The ZingChart-AngularJS directive exposes the entire ZingChart library, which supports mixed charts. It's free for commercial use. I made a demo on CodePen of what you're looking for.
Here's what your JS would look like:
var app = angular.module('myApp', ['zingchart-angularjs']);
app.controller('MainController', function($scope) {
$scope.myJson = {
"type": "mixed",
"background-color": "white",
"plot": {
"stacked": true
},
"series": [{
"type": "bar",
"values": [25, 30, 15, 20, 25],
"stack": 1,
"background-color": "#4372c1",
"hover-state": {
"visible": false
},
}, {
"type": "bar",
"values": [20, 10, 30, 25, 15],
"stack": 1,
"background-color": "#ea4204",
"hover-state": {
"visible": false
},
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
}
}, {
"type": "line",
"values": [25, 30, 15, 20, 25],
"line-color": "#38408c",
"marker": {
"background-color": "#38408c",
"border-color": "#38408c"
},
"hover-state": {
"visible": false
},
},]
};
});
angular-nvd3 supports this.
All you have to do is set bars1.stacked=true and bars2.stacked=true
http://plnkr.co/edit/2gSaYHgNkuNjbj9SGrWt?p=preview
$scope.options = {
chart: {
type: 'multiChart',
...
bars1: {stacked:true},
bars2: {stacked:true},
...
};
}
}