dagre-d3 | 易学教程

Rendering a family tree with d3 or cytoscape

阅读更多关于 Rendering a family tree with d3 or cytoscape

问题 I'm having problems generating a good looking family tree with Javascript. Requirements: Each child should be connected to two parents in the tree, not one as in some graphs I've like spouses to be next to each other in the tree (same vertical position) I'd like to organize the nodes by generation vertically, so that you can see people born in the same decade at a glance. One person can have multiple spouses over time, and children with each of them Parents and children can be added freely in

Rendering a family tree with d3 or cytoscape

阅读更多关于 Rendering a family tree with d3 or cytoscape

vuejs + dagre-d3 tooltip issue

阅读更多关于 vuejs + dagre-d3 tooltip issue

问题 I am trying to integrate the below graph(dagre-d3) to my vuejs application. http://www.samsarin.com/project/dagre-d3/latest/demo/hover.html I have successfully able to generate the graph inside the vuejs component. But i am not able to achieve the tooltip functionality which is provided in the graph. They are using a library called tipsy, when i run the graph in a plain html it works fine. But when i use inside the vue application its throwing the below error. [Vue warn]: Error in mounted

Increasing clickable area of an edge in D3 diagram

阅读更多关于 Increasing clickable area of an edge in D3 diagram

问题 I have a graph being made by d3, with dagre-d3 sitting on top of it for drawing directed graphs. This gives me what I expect for rendering the graph: To edit the data building the graph, each element is click-able. This is fine for the cases where the edges are rendered with labels, but they don't always have labels, leading to the unlabeled edges being very hard to click to edit. These style assigned to the edges is: #visitGraph .edgePath { cursor: pointer; stroke: #333; stroke-width: 2px;

Position of a custom shape using dagre

阅读更多关于 Position of a custom shape using dagre

问题 I'm trying to create a custom shape and set x and y axis on the svg, so far I got it done but for on top of my element I have a transform attribute that belongs to a group (g) that references the node, I tried to change the attribute setting a custom transform but without any luck. my question is, how can I change the x and y position for the whole node? render.shapes().task = function(parent, bbox, node) { var shapeSvg = parent.insert('rect', ':first-child') .attr('x', node.x) .attr('y',

Resizing d3 / dagre-d3 svg to show all contents

阅读更多关于 Resizing d3 / dagre-d3 svg to show all contents

问题 I'm trying to create DAGs with dagre-d3. The data for these DAGs comes from a database, are different for each DAG and as such, I do not know the width/height to give the containing svg before adding all nodes and edges to the graph. So ideally I'd call something like d3.select("#svg1").resize_to_match_contents() after adding all nodes and edges to make sure all nodes are visible and the svg isn't too large. Of course there is no such function, and I have no idea how to implement it. I know I

dagre-d3 js Zoom Fit to all contents

阅读更多关于 dagre-d3 js Zoom Fit to all contents

问题 I am using dagre-d3 which is based upon d3.js. After my graph is rendered I want it to zoom to fit all contents and it must be centered. As you can see I can center it alright but I cant seem to fit all contents as my height is 400. Please note that I want a solution which should be usable to other dagre situation , for example just scaling to 0.5 will fit in this case may be but this is not what i want. JSFIDDLE: https://jsfiddle.net/bababalcksheep/xa9rofm5/8/ CODE: 'use strict'; // // setup

flowcharts in d3js using dagre-d3 or colajs

阅读更多关于 flowcharts in d3js using dagre-d3 or colajs

问题 After seeing the quite complex TCP state diagram example of dagre-d3, I figured it would be able to resolve diagrams of similar complexity. In the following diagram, this clearly isn't the case. If the two marked nodes were swapped, all crossings would be resolved. Another interesting thing is that how good the graph is solved seems to depend on the order I set the edges in. The following code g.setEdge("148570019_1100", "148570020_1100", { label: "" }); g.setEdge("148570019_1100", "148570021

dagre-d3 IE workaround for SVG foreignObject element?

阅读更多关于 dagre-d3 IE workaround for SVG foreignObject element?

问题 I'm an undergrad co-op and am currently developing a webpage project for my team. In the beginning, I chose to use dagre-d3 library to construct graphs, and they work fine on Chrome. Then I realize that ForeignObject element in SVG doesn't work on IE (which happens to be the primary browser to support). Since my goal is essentially to populate HTML content in each graph component, I was wondering if there was any workaround to implement this on IE still using dagre-d3. Or any recommendations

flowcharts in d3js using dagre-d3 or colajs

阅读更多关于 flowcharts in d3js using dagre-d3 or colajs

After seeing the quite complex TCP state diagram example of dagre-d3, I figured it would be able to resolve diagrams of similar complexity. In the following diagram, this clearly isn't the case. If the two marked nodes were swapped, all crossings would be resolved. Another interesting thing is that how good the graph is solved seems to depend on the order I set the edges in. The following code g.setEdge("148570019_1100", "148570020_1100", { label: "" }); g.setEdge("148570019_1100", "148570021_1100", { label: "" }); g.setEdge("148570019_1100", "148570010_1100", { label: "" }); doesn't give the