Question

我正在为Alphabeta修剪做一个游戏树，我使用svg创建了树，但现在我想在树中添加可编辑文本，并且能够在我的计算中使用输入的值。比如使用在我的计算中输入的值。

任何人都可以帮助我。

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>

Answer 1

以编程方式使用[D3] [1]：我希望这可以帮助：）

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/

如何在svg形状中添加编辑文本

1 个答案: