0

am doing a game tree for Alphabeta pruning and i have created the tree using svg but now i want to add editable text inside the tree and be able to use the entered value in my calculations. like use the values entered in my calculations.

can anyone help me with this.

html, body {
background: #EEE;
}
svg {
background-color: #EEE;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}

.navbar .navbar-nav a,
.navbar .navbar-header span {
color: #FFF;
cursor: default;
}

.nopadding {
padding: 0 !important;
}

.nomargin {
margin: 0 !important;
}

.ab-tree {
position:;
}

.info {
z-index: 10;
position: absolute;
bottom: 6px;
left: 6px;
font-size: 9px;
}

.prune-info {
z-index: 10;
position: absolute;
bottom: 6px;
right: 6px;
font-size: 14px;
}

.ctrl-panel {
z-index: 10;
position: relative;
float: right;
width: 325px;
padding: 10px;
margin: 10px;
background: rgba(0, 0, 0, 0.08);
border-radius: 4px;
font-size: 12px;
}

.ctrl-panel .btn {
font-size: 12px;
}

.ctrl-panel hr {
margin: 10px;
height: 0;
border: 0;
border-top: 1px solid #ccc;
}

.ctrl-panel .row {
margin: 5px 0;
}

.ctrl-panel .row > div {
padding-left: 2.5px;
padding-right: 2.5px;
margin-left: 0;
margin-right: 0;
}

.ctrl-panel .row .progress {
margin-bottom: 0;
padding: 0;
}

.ctrl-panel .row .slider-handle {
background-color: #428BCA;
background-image: none;
opacity: 1;
}

.button-label-container {
padding: 7px 0 0 0;
margin: 0;
}

.button-label {
padding: 0 3px;
}

.slider-label.left {
padding: 0 10px 0 0;
}

.slider-label.right {
padding: 0 0 0 10px;
}

.answer-true {
color: #008800;
}

path.link {
fill: none;
stroke: #000;
stroke-width: 4px;
}

path.link.hover {
stroke: #666666;
}

path.link.entered,
path.link.entered.hover {
stroke: #008800;
}

path.link.pruned {
stroke-dasharray: 10,10;
stroke: #880000;
}

path.link.pruned.hover {
stroke: #cd0000;
}

path.mouselink {
stroke-width: 30px;
stroke: #000;
stroke-opacity: 0;
cursor: pointer;
}


g.node path {
cursor: pointer;
fill: #FFF;
stroke: #000;
}
g.node path:hover {
fill: #EEE;
}
g.node.entered path {
fill: #EEFFEE;
}

g.node.leaf path {
fill: #FFF;
}
g.node.leaf path:hover {
fill: #EEE;
}
g.node.entered.leaf path {
fill: #EEEEFF;
}

rect.cursor {
fill: #000;
}

text {
font-family: 'Helvetica Neue', sans-serif;
font-size: 18px;
pointer-events: none;
}

text.value {
text-anchor: middle;
font-weight: bold;
}

g.node.pruned .alpha,
g.node.pruned .beta {
fill: #AA0000;
}
<html>
<head>
<meta charset="utf-8">
</head>
<body ng-controller="MainCtrl" class="ng-scope" data-pinterest-extension-installed="cr2.0.5">
<div class="container-fluid nopadding">
<ab-tree class="ab-tree ng-isolate-scope" >
<svg width="1350" height="606"><g><g>
<path class="link" d="M675,100L291.66666666666663,303"></path>
<path class="mouselink" d="M675,100L291.66666666666663,303"></path></g><g>
<path class="link" d="M291.66666666666663,303L163.88888888888889,506"></path>
<path class="mouselink" d="M291.66666666666663,303L163.88888888888889,506"></path></g><g>
<path class="link" d="M291.66666666666663,303L291.66666666666663,506"></path>
<path class="mouselink" d="M291.66666666666663,303L291.66666666666663,506"></path></g><g>
<path class="link" d="M291.66666666666663,303L419.44444444444446,506"></path>
<path class="mouselink" d="M291.66666666666663,303L419.44444444444446,506"></path></g><g>
<path class="link" d="M675,100L675,303"></path>
<path class="mouselink" d="M675,100L675,303"></path></g><g>
<path class="link" d="M675,303L547.2222222222222,506"></path>
<path class="mouselink" d="M675,303L547.2222222222222,506"></path></g><g>
<path class="link" d="M675,303L675,506"></path>
<path class="mouselink" d="M675,303L675,506"></path></g><g>
<path class="link" d="M675,303L802.7777777777778,506"></path>
<path class="mouselink" d="M675,303L802.7777777777778,506"></path></g><g>
<path class="link" d="M675,100L1058.3333333333333,303"></path>
<path class="mouselink" d="M675,100L1058.3333333333333,303"></path></g><g>
<path class="link" d="M1058.3333333333333,303L930.5555555555555,506"></path>
<path class="mouselink" d="M1058.3333333333333,303L930.5555555555555,506"></path></g><g>
<path class="link" d="M1058.3333333333333,303L1058.3333333333333,506"></path>
<path class="mouselink" d="M1058.3333333333333,303L1058.3333333333333,506"></path></g><g>
<path class="link" d="M1058.3333333333333,303L1186.111111111111,506"></path>
<path class="mouselink" d="M1058.3333333333333,303L1186.111111111111,506"></path></g></g><g><g class="node">
<path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(715,76.90598923241495) rotate(180)"></path>
<text class="value" x="675" y="106"></text>
<text class="prunemsg"></text>
<text class="alpha" x="720" y="96"></text>
<text class="beta" x="720" y="116"></text></g> <g class="node">
<path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(251.66666666666663,326.094010767585)"></path>
<text class="value" x="291.66666666666663" y="309"></text>
<text class="prunemsg"></text><text class="alpha" x="336.66666666666663" y="299"></text>
<text class="beta" x="336.66666666666663" y="319"></text></g>
<g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(123.88888888888889,546)"></path>

<text class="value" x="163.88888888888889" y="512">6</text>
<text class="prunemsg"></text>
<text class="alpha" x="208.88888888888889" y="502"></text>
<text class="beta" x="208.88888888888889" y="522"></text></g><g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(251.66666666666663,546)"></path>
<text class="value" x="291.66666666666663" y="512">9</text>
<text class="prunemsg"></text>
<text class="alpha" x="336.66666666666663" y="502"></text>
<text class="beta" x="336.66666666666663" y="522"></text></g><g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(379.44444444444446,546)"></path>
<text class="value" x="419.44444444444446" y="512">-5</text>
<text class="prunemsg"></text><text class="alpha" x="464.44444444444446" y="502"></text>
<text class="beta" x="464.44444444444446" y="522"></text></g><g class="node">
<path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(635,326.094010767585)"></path>
<text class="value" x="675" y="309"></text>
<text class="prunemsg"></text>
<text class="alpha" x="720" y="299"></text>
<text class="beta" x="720" y="319"></text></g>
<g class="node leaf"><path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(507.2222222222222,546)"></path>
<text class="value" x="547.2222222222222" y="512">-17</text>
<text class="prunemsg"></text><text class="alpha" x="592.2222222222222" y="502"></text>
<text class="beta" x="592.2222222222222" y="522"></text></g><g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(635,546)"></path>
<text class="value" x="675" y="512">18</text>
<text class="prunemsg"></text><text class="alpha" x="720" y="502"></text>
<text class="beta" x="720" y="522"></text></g><g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(762.7777777777778,546)"></path>
<text class="value" x="802.7777777777778" y="512">-1</text>
<text class="prunemsg"></text>
<text class="alpha" x="847.7777777777778" y="502"></text>
<text class="beta" x="847.7777777777778" y="522"></text></g>
<g class="node"><path class="nodepath" d="M0,0L80,0L40,-69.2820323027551L0,0" transform="translate(1018.3333333333333,326.094010767585)"></path>
<text class="value" x="1058.3333333333333" y="309"></text>
<text class="prunemsg"></text>
<text class="alpha" x="1103.3333333333333" y="299"></text>
<text class="beta" x="1103.3333333333333" y="319"></text></g>
<g class="node leaf"><path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(890.5555555555555,546)"></path>
<text class="value" x="930.5555555555555" y="512">7</text>
<text class="prunemsg"></text><text class="alpha" x="975.5555555555555" y="502"></text>
<text class="beta" x="975.5555555555555" y="522"></text></g><g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(1018.3333333333333,546)"></path>
<text class="value" x="1058.3333333333333" y="512">-13</text>
<text class="prunemsg"></text><text class="alpha" x="1103.3333333333333" y="502"></text>
<text class="beta" x="1103.3333333333333" y="522"></text></g><g class="node leaf">
<path class="nodepath" d="M20.952380952380953,-20.952380952380953L59.04761904761905,-20.952380952380953L59.04761904761905,-59.04761904761905L20.952380952380953,-59.04761904761905L20.952380952380953,-20.952380952380953" transform="translate(1146.111111111111,546)"></path>
<text class="value" x="1186.111111111111" y="512">-20</text>
<text class="prunemsg"></text>
<text class="alpha" x="1231.111111111111" y="502"></text>
<text class="beta" x="1231.111111111111" y="522"></text></g></g>
</svg>
</ab-tree>
</div>
</body>
</html>
Gizele
  • 9
  • 8

1 Answers1

0

Programmatically using [D3][1]: I HOPE THIS CAN HELP :)

body = d3.select('body')
svg = body.append('svg').attr('height', 600).attr('width', 200)
rect = svg.append('rect').transition().duration(500).attr('width', 150)
                .attr('height', 100)
                .attr('x', 40)
                .attr('y', 100)
                .style('fill', 'white')
                .attr('stroke', 'black')
text = svg.append('text').text('This is some information about whatever')
                .attr('x', 50)
                .attr('y', 150)
                .attr('fill', 'black')


  [1]: http://d3js.org/
Noredine Bahri
  • 71
  • 6