score:1
i don't know d3.js, but i see you've included the graphviz tag as well, so i've created the dot
syntax below. hope it's helpful in some way!
graph graphname {
graph [ranksep=3, nodesep=4] // these options are used to approach the example image as close as possible
edge [fontname="arial"]
rankdir=tb
node [style="solid", fontname="arial"]
d1 [label="device 1"]
d2 [label="device 2"]
d3 [label="device 3"]
// dirty: i tweaked the label position with leading or trailing spaces
d1 -- d2 [
taillabel="interface1"
headlabel="interface2 "
labelfontcolor="darkgreen"
]
d2 -- d3 [ // had to use html labels to give distinct colors to head and tail
taillabel=<<font color="#006400"> interface 4</font>>
headlabel=<<font color="#ff1a1a">interface 3 </font>>
]
{rank=same d1;d3} // keeps device 1 and 3 on same level
}
when running this through dot
i get this image:
credits to this answer for describing how to achieve different head- and tail-labels.
Source: stackoverflow.com
Related Query
- Network graph using d3.js
- React-Native fetch, Network request failed. Not using localhost
- How to change network in metamask using react js
- Network first caching of index.html using workbox.js
- add multiple node box selector on the canvas of VisJS network graph in ReactJS
- How to create a d3 force layout graph using React
- Authenticate Users and use Graph API using Azure AD, ReactJS and NodeJS
- share image on social network using react.js react-share
- Possible unhandled promise rejection, network error when using axios
- ERR_NAME_NOT_RESOLVED using Docker network to communicate between a backend container and a React container
- How to plot whole graph as json data into ploty using react.js?
- Using Redux to display a notification in response to a network request
- How to serve gatsby development build on local network using https?
- How to know if a user is connected to cellular network or wifi using reactjs
- How can I fix the "Unhandled Rejection (error): Network error" obtained using axios in React
- Working example for Graph Toolkit using SharePoint spfx, React and Get component with template
- how to draw simple sparkline graph using react js?
- Unable to plot a bar graph using VictoryBar in React-Redux
- Using axios or async network call in the actions of the redux, updating the initial state
- Network error while using API on localhost, with Jest & React Testing Library
- Highcharts | Network Graph - Is there a way to expand leaf nodes on click of the Parent node?
- Is it possible to have an upColor on a Area graph using Highcharts?
- I am trying to get data from my backend using axios, but its showing Network error
- D3 + ReactJS network graph hangs the browser indefinitely after continuously updating graph
- Microsoft Graph Toolkit - How to insert additional details in Person Card using React
- VisJS Network Graph not stabilizing and moving in circle
- How to display the separate graph using multiple axios request with React?
- Plot graph using react-d3
- Using graph QL and React, how can I divide API by month?
- Adding a custom network to MetaMask with http address isn't working using wallet_addEthereumChain
More Query from same tag
- How to handle oidc silent renew error
- React Hooks and Axios Image Upload with Multer
- Does react setState execute if the old and new value are the same?
- React-Select not showing options
- React-select sometimes doesn't display the options in the dropdown menu on async search
- How to map nested array containing objects in react js?
- Creating a table that can drag and drop both columns and rows on React
- REACT Typescript fetch/ axios error - following properties from type 'Address[]': length, pop, push, concat, and 28 more. TS2740
- Connecting Slate to Formik - is it useField?
- Opening Dialog drawer half way
- why does my minimax for tic-tac-toe return undefined in reactjs
- How to redirect with react-router and send a message
- React doesn't render without Reloading the page on URL Change
- Sort array of documents by date string - ReactJS
- Adding debounce to react hook form
- google-map-react populate multiple markers
- Inject variables directly to a function passed on from React-Apollo <Mutation /> component and not as props
- Gatsby createPages with single JSON file doesn't refresh data changes
- NextJS: Loading Font from Database
- CSS icon button half going offscreen on mobile view
- Change language to "+2 more" link in react-big-calendar
- Where to put network calls in a react+redux app
- req.handle.writev is not a function
- Redux Simple Router pushPath not updating URL
- HOC for fetching data in Redux
- Do closures work the same way on class methods?
- PurgeCSS removing Tailwind font in next.js
- Package that is linked with npm link doesn't update
- #REACT Convert a JSX.Element to an HTMLElement
- Get data from 2 URLs in one component in React.js