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?
Related
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:
I'm using VictoryPie to show my data, however, I want to be able to choose which color represents which section. Mainly because this is a pie chart of colors. I have seen a couple questions on StackOverflow asking something similar, but none of them fixed my problem.
My data object looks like:
[
{
"color": "#0000fe",
"x": "blue",
"y": 1
},
{
"color": "#fe00fe",
"x": "fuchsia",
"y": 2
},
{
"color": "#fefe00",
"x": "yellow",
"y": 8
},
{
"color": "#008000",
"x": "green",
"y": 20
}
]
And my code to render it is:
<VictoryPie
data={this.state.sets}
style={{
data: { fill: (d) => d.color }
}}
/>
My Pie currently looks entirely black, and I wanted to know if I was doing something wrong.
you're taking a color from the wrong place, try this:
<VictoryPie
data={this.state.sets}
style={{
data: { fill: (d) => d.datum.color }
}}
/>
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 this filter:
$http.get('data.json').then(function(response){
$scope.dataCopy = response.data;
$scope.detMaq = $filter('filter')(angular.copy($scope.dataCopy), {index:hielo, frecuencia:frec, prod_24_h_kg:peso }, false);
console.log($scope.detMaq);
});
And I'm building a few div's full of info with data from that data.json.
However, let's say that peso is 1.000, so in my filter I want only data that match completely to show up. This however it'll bring up data with 10.000 also, because the filter is not exact.
If I put true instead of false in the filter, the page will always be blank. even though it should bring information.
Am I missing something? Since it's a triple filter should I put 3 true's?
Here's the json.data
[{
"codigo": 21420,
"desc": "......",
"desc_n": "......",
"sistema": "DUCHAS",
"material_carroceria": "A.....",
"refrigerada": "AIRE",
"modelo_cubito_nombre": "ALFA",
"modelo_cubito_nombre_comercial": "",
"modelo_cubito_gr": 17,
"prod_24_h_kg": 22,
"almacen_cubitos_kg": "6",
"almacen_cubitos_cubitos": 400,
"ciclo_cubitos": 18,
"datos_comerciales_ciclo_cubitos": 18,
"compresor_cv": " 1/5",
"remota": null,
"potencia_w_1": 340,
"potencia_w_2": 270,
"voltaje": 220,
"frecuencia": 50,
"fases": "I",
"uk": null,
"gas_tipo": "R404a",
"gas_carga_gr": 180,
"mse_ancho": 350,
"mse_alto": 590,
"mse_fondo": 475,
"mse_alto_con_patas": "SIN PATAS",
"mce_ancho": 430,
"mce_alto": 720,
"mce_fondo": 540,
"peso_neto": 32,
"peso_bruto": 36,
"index": 99,
"enlace_catalogo": "..........",
"familia": ".........."
}, {
"codigo": 21421,
"desc": "...........",
"desc_n": "..........",
"sistema": "DUCHAS",
"material_carroceria": "ACERO INOXIDABLE AISI 304",
"refrigerada": "AGUA",
"modelo_cubito_nombre": "ALFA",
"modelo_cubito_nombre_comercial": "",
"modelo_cubito_gr": 17,
"prod_24_h_kg": 24,
"almacen_cubitos_kg": "6",
"almacen_cubitos_cubitos": 400,
"ciclo_cubitos": 18,
"datos_comerciales_ciclo_cubitos": 18,
"compresor_cv": " 1/5",
"remota": null,
"potencia_w_1": 340,
"potencia_w_2": 210,
"voltaje": 220,
"frecuencia": 50,
"fases": "I",
"uk": null,
"gas_tipo": "R404a",
"gas_carga_gr": 140,
"mse_ancho": 350,
"mse_alto": 590,
"mse_fondo": 475,
"mse_alto_con_patas": "SIN PATAS",
"mce_ancho": 430,
"mce_alto": 720,
"mce_fondo": 540,
"peso_neto": 32,
"peso_bruto": 36,
"index": 99,
"enlace_catalogo": "....",
"familia": "....."
}]
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},
...
};
}
}