Как создать дерево решений / блок-схему в D3 / dagre-D3 / javascript? - PullRequest
Новая
       74

Как создать дерево решений / блок-схему в D3 / dagre-D3 / javascript?

0 голосов
/ 03 мая 2019

Итак, я хотел бы создать блок-схему вопросов, как показано ниже: 'question flow' chart example Не уверен, с чего лучше всего начинать ... Это ориентированный график?Некоторые из них заканчиваются тем, что действительно разнесены и выглядят не очень хорошо для «потоков», вот так: https://observablehq.com/@d3/force-directed-graph

Лучший пример, который я видел, - это библиотека не-D3 (yworks), но, похоже, она стоит$ 15k: yworks example Это единственный связанный StackOverflow, который я видел, который ссылается только на yworks: Могу ли я создать потоковую диаграмму (без древовидной диаграммы), используя D3.js Может быть, этоПример с dagre-d3: http://jsfiddle.net/armyofda12mnkeys/9L50of2c/2/

var g = new dagreD3.graphlib.Graph().setGraph({});

Несколько интересных дополнительных вещей, которые я хотел бы добавить:

* Я также хочу иметь возможность контролировать css на Кругахподобно тому, как некоторые из них будут зеленого цвета красным при определенных обстоятельствах, основанных на данных этого узла.

* Каждая стрелка Edge я также хотел бы добавить события onHovers, поэтому появляется всплывающая подсказка, чтобы отобразить фактическое правило типа 'if (Question1 == A || B) '

* Сделайте узлы / ребра перетаскиваемыми или «упругими» (где они возвращаются в исходное положение, если их перетаскивают).Звучит бесполезно, но иногда пользователи могут использовать эту функцию, если правила слишком тесны (из-за умного автоматического макета), и они хотят перетащить материал, чтобы увидеть, на что указывают стрелки.

1 Ответ

0 голосов
/ 03 мая 2019

Я думаю, что получил с dagre-d3. Вот мой начальный jsfiddle: http://jsfiddle.net/armyofda12mnkeys/4gv90qhx/2/

Также вот тот же пример с всплывающими окнами также по краям (хотя мне не очень нравится реализация, как всплывающим окнам узла) http://jsfiddle.net/armyofda12mnkeys/4gv90qhx/37/

и вот полный пример того, как я использую в своем проекте для вопросника по диабету (я обновил код до последней версии d3.v5 + dagre, и сделал перетаскивание узлов + ребер ... много начального анализа JSON код, чтобы войти в формат, который я могу на самом деле зациклить, извините за это): https://jsfiddle.net/armyofda12mnkeys/1burht5j/33/

// Create a new directed graph
var g = new dagreD3.graphlib.Graph().setGraph({});

var nodes = [ 
{'qs_code':"QS1", 'hovertext': 'This is QS1', 'proto_logic_type': 'none' },
{'qs_code':"QS2", 'hovertext': 'This is QS2', 'proto_logic_type': 'disqualify'},
{'qs_code':"QS3", 'hovertext': 'This is QS3', 'proto_logic_type': 'qualify'},
{'qs_code':"QS4", 'hovertext': 'This is QS4', 'proto_logic_type': 'both'},
{'qs_code':"QS5", 'hovertext': 'This is QS5', 'proto_logic_type': 'none'},
{'qs_code':"QS6", 'hovertext': 'This is QS6', 'proto_logic_type': 'none'}
];

// Automatically label each of the nodes
nodes.forEach(function(node) {
    g.setNode(node.qs_code, { label: node.qs_code, shape: "circle", class: [node.proto_logic_type], hovertext: node.hovertext  });  //style: 'fill: red' 
});

// Set up the edges
g.setEdge("QS1", "QS2", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA&amp;gt;BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule1</u>", hovertext:"A>B", labelType: "html" });
g.setEdge("QS1", "QS3", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA&amp;lt;BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule2</u>", hovertext:"A<B", labelType: "html" });
g.setEdge("QS1", "QS4", { label: "<u onmouseover='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"visible\"); })()' onmouseout='(function(){ return $(\"#tooltip_template\").css(\"visibility\", \"hidden\"); })()' onmousemove='(function(){ $(\"#tooltip_template\").html(\"AAA==BBB\").css(\"top\", (event.pageY-10)+\"px\").css(\"left\",(event.pageX+10)+\"px\"); })()'>Rule3</u>", hovertext:"A==B", labelType: "html" });

g.setEdge("QS2", "QS5", { label: "Rule1", arrowhead: "vee", hovertext:"(A+B)>1" });

g.setEdge("QS3", "QS5", { label: "Rule1", hovertext:"(A-B)<2" });
g.setEdge("QS3", "QS6", { label: "Rule2", hovertext:"(A*B)>=3" });

g.setEdge("QS4", "QS6", { label: "Rule2", arrowhead: "vee", hovertext:"(A>10)||(B<20)" });


var svg = d3.select("svg"),
    inner = svg.select("g");

// Set the rankdir
g.graph().rankdir = 'TB';//'LR';
g.graph().nodesep = 50;

// Set up zoom support
var zoom = d3.behavior.zoom().on("zoom", function() {
      inner.attr("transform", "translate(" + d3.event.translate + ")" +
                                  "scale(" + d3.event.scale + ")");
    });
svg.call(zoom);

// Create the renderer
var render = new dagreD3.render();


// Run the renderer. This is what draws the final graph.
render(inner, g);


var tooltip = d3.select("body")
    .append("div")
  .attr('id', 'tooltip_template')
    .style("position", "absolute")
    .style("background-color", "white")
  .style("border", "solid")
  .style("border-width", "2px")
  .style("border-radius", "5px")  
  .style("padding", "5px")
    .style("z-index", "10")
    .style("visibility", "hidden")
    .text("Simple Tooltip...");

inner.selectAll('g.node')
  .attr("data-hovertext", function(v) { 
        return g.node(v).hovertext
    })
    .on("mouseover", function(){return tooltip.style("visibility", "visible");})
    .on("mousemove", function(){ 
    tooltip.text( this.dataset.hovertext)   
        .style("top", (event.pageY-10)+"px")
        .style("left",(event.pageX+10)+"px");
  })
    .on("mouseout", function(){return tooltip.style("visibility", "hidden");});

inner.selectAll('g.edgePath')
//inner.selectAll('path')
.append('title').text('This is a line.');

// Center the graph
var initialScale = 0.75;
zoom
  .translate([(svg.attr("width") - g.graph().width * initialScale) / 2, 20])
  .scale(initialScale)
  .event(svg);
svg.attr('height', g.graph().height * initialScale + 40);
...