|
<!DOCTYPE html> |
|
<meta charset="utf-8"> |
|
<style> |
|
|
|
body { |
|
font: 14px sans-serif; |
|
letter-spacing: 1px; |
|
background-color: #FDE3E6; |
|
} |
|
|
|
.link { |
|
fill: none; |
|
stroke: #a0a0a0; |
|
stroke-width: 1px; |
|
} |
|
|
|
.win { |
|
stroke-width: 3px !important; |
|
} |
|
|
|
#container { |
|
position: relative; |
|
} |
|
|
|
#labels .table { |
|
position: absolute; |
|
background-color: #FEEBEE; |
|
padding: 5px 7px 3px; |
|
line-height: 2; |
|
min-width: 185px; |
|
box-shadow: 0px 2px 2px 1px rgba(34, 34, 34, 0.1); |
|
color: #222222; |
|
border: 0px solid rgba(34, 34, 34, 0.1); |
|
} |
|
|
|
#labels .played { |
|
--border-width: 0px; |
|
} |
|
|
|
#labels .thirdplace .title { |
|
color: #222222; |
|
font-size: 15px; |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
} |
|
|
|
#labels .thirdplace .content { |
|
color: #222222; |
|
font-size: 15px; |
|
padding: 5px 3px 3px; |
|
text-transform: uppercase; |
|
background-color: #FEEBEE; |
|
min-width: 185px; |
|
line-height: 1.2; |
|
border: 1px solid rgba(34, 34, 34, 0.1); |
|
} |
|
|
|
#labels .row { |
|
display: table-row; |
|
} |
|
|
|
#labels .cell { |
|
padding-left: 10px; |
|
display: table-cell; |
|
text-transform: uppercase; |
|
} |
|
|
|
.winner { |
|
font-weight: bold; |
|
} |
|
|
|
.cell.score { |
|
border-left: 1px solid rgba(34, 34, 34, 0.1); |
|
} |
|
|
|
.cell.name { |
|
min-width: 140px; |
|
padding-right: 10px; |
|
} |
|
</style> |
|
<body> |
|
|
|
<div id="container"> |
|
<svg></svg> |
|
<div id="labels"></div> |
|
</div |
|
|
|
<!-- load the d3.js libraries --> |
|
<script src="//d3js.org/d3.v4.min.js"></script> |
|
<script src="https://d3js.org/d3-path.v1.min.js"></script> |
|
<script src="https://d3js.org/d3-shape.v1.min.js"></script> |
|
|
|
<script> |
|
// set the dimensions and margins of the diagram |
|
var margin = {top: 40, right: 90, bottom: 50, left: 150}, |
|
width = 900 - margin.left - margin.right, |
|
height = 650 - margin.top - margin.bottom, |
|
separationConstant = 1; |
|
|
|
var treeData = |
|
{ |
|
a: ' ', |
|
b: "Hammarby", |
|
score: "spelas nu", |
|
children: [ |
|
{ |
|
a: ' ', |
|
b: ' ', |
|
win: false, |
|
children: [ |
|
{ |
|
a: ' ', |
|
b: ' ', |
|
win: false, |
|
children: [ |
|
{ |
|
a: 'Halmstads BK', |
|
b: 'Hammarby', |
|
ascore: 3, |
|
bscore: 1, |
|
win: false, |
|
}, |
|
{ |
|
a: 'IFK Norrköping', |
|
b: 'Östersunds FK', |
|
win: false, |
|
}, |
|
] |
|
}, |
|
{ |
|
a: ' ', |
|
b: 'Malmö FF', |
|
win: false, |
|
children: [ |
|
{ |
|
a: 'Halmstads BK', |
|
b: 'Hammarby', |
|
win: false, |
|
}, |
|
{ |
|
a: 'Malmö FF', |
|
b: 'Östersunds FK', |
|
ascore: 1, |
|
bscore: 0, |
|
win: true, |
|
}, |
|
] |
|
}, |
|
] |
|
}, |
|
{ |
|
a: 'Halmstads BK', |
|
b: 'Hammarby', |
|
ascore: 0, |
|
bscore: 1, |
|
win: true, |
|
children: [ |
|
{ |
|
a: 'Halmstads BK', |
|
b: 'Östersunds FK', |
|
ascore: 3, |
|
bscore: 1, |
|
win: true, |
|
children: [ |
|
{ |
|
a: 'Halmstads BK', |
|
b: 'Hammarby', |
|
ascore: 1, |
|
bscore: 0, |
|
win: true, |
|
}, |
|
{ |
|
a: 'IFK Norrköping', |
|
b: 'Östersunds FK', |
|
ascore: 2, |
|
bscore: 3, |
|
win: true, |
|
}, |
|
] |
|
}, |
|
{ |
|
a: 'IFK Norrköping', |
|
b: 'Hammarby', |
|
ascore: 2, |
|
bscore: 3, |
|
win: true, |
|
children: [ |
|
{ |
|
a: 'Halmstads BK', |
|
b: 'IFK Norrköping', |
|
ascore: 0, |
|
bscore: 1, |
|
win: true, |
|
}, |
|
{ |
|
a: 'IFK Norrköping', |
|
b: 'Hammarby', |
|
ascore: 1, |
|
bscore: 2, |
|
win: true, |
|
}, |
|
] |
|
}, |
|
] |
|
} |
|
] |
|
}; |
|
|
|
// line connector between nodes |
|
var line = d3.line() |
|
.x(d => width - d.y) |
|
.y(d => d.x) |
|
.curve(d3.curveStep); |
|
|
|
// declares a tree layout and assigns the size |
|
var treemap = d3.tree() |
|
.size([height, width]) |
|
.separation((a,b) =>a.parent == b.parent ? 1 : separationConstant); |
|
|
|
// assigns the data to a hierarchy using parent-child relationships |
|
var nodes = d3.hierarchy(treeData); |
|
|
|
// maps the node data to the tree layout |
|
nodes = treemap(nodes); |
|
|
|
var svg = d3.select("svg") |
|
.attr("width", width + margin.left + margin.right) |
|
.attr("height", height + margin.top + margin.bottom); |
|
|
|
var g = svg.append("g") |
|
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); |
|
|
|
// adds the links between the nodes |
|
var link = g.selectAll(".link") |
|
.data(nodes.descendants().slice(1)) |
|
.enter().append("path") |
|
.attr("class", "link") |
|
.attr("d", d => line([d, d.parent ])) |
|
.classed("win", d => d.data.win) |
|
|
|
// adds labels to the nodes |
|
function gameTemplate(d) { |
|
return '' + |
|
"<div class='row" + (d.data.ascore > d.data.bscore ? ' winner' : '') + "'>" + |
|
"<span class='cell name'>" + d.data.a + "</span>" + |
|
"<span class='cell score'>" + (d.data.ascore >= 0 ? d.data.ascore : '') + "</span>" + |
|
"</div>" + |
|
|
|
"<div class='row" + (d.data.bscore > d.data.ascore ? ' winner' : '') + "'>" + |
|
"<span class='cell name'>" + (d.data.b || '') + "</span>" + |
|
"<span class='cell score'>" + (d.data.bscore >= 0 ? d.data.bscore : '') + "</span>" + |
|
"</div>"; |
|
} |
|
|
|
var labels = d3.select('#labels') |
|
.selectAll('div') |
|
.data(nodes.descendants()) |
|
.enter() |
|
.append("div") |
|
.classed("table", true) |
|
.classed("played", d => (d.data.ascore || d.data.bscore)) |
|
|
|
.style('left', d => (width - d.y + margin.left - 100) + 'px') |
|
.style('top', d => (d.x + (!d.data.b ? 12 : 0) + (!d.data.children ? - 4 : 0) + 10) + 'px') |
|
.html(d => gameTemplate(d)) |
|
|
|
// third place |
|
var thrdData = {data: { |
|
a: ' ', |
|
b: 'Halmstad BK', |
|
}}; |
|
|
|
var thrd = d3.select('#labels').append("div") |
|
.classed("thirdplace", true) |
|
.style('position', 'absolute') |
|
.style('left', width - 175 + 'px') |
|
.style('top', (height)/2 + margin.top - 48 + 'px') |
|
|
|
thrd |
|
.append("div") |
|
.classed("title", true) |
|
.html('Tredjeplats'); |
|
|
|
thrd |
|
.append("div") |
|
.classed("content", true) |
|
.html(d => gameTemplate(thrdData)); |
|
|
|
|
|
</script> |
|
</body> |
