mapSingleArrowsLeftRight = {
const svg = d3.select(DOM.svg(width, height))
const mapGroup = svg.append("g")
.attr("transform", `translate(${width/2}, ${height/2})`)
const leftGroupLines = mapGroup
.selectAll(".connection-group")
.data(dataOrdered.left)
.enter().append("g")
.attr("transform", (d, i) => {
const separation = (180 - (breakAngle * 2)) / (dataOrdered.left.length - 1)
const isEven = dataOrdered.left.length % 2
let angle = 0
if (i % 2 === 0) angle = 180 + (separation * (i / 2)) + (separation / 2)
else angle = 180 - separation * (i / 2)
if (isEven === 1) angle = angle - (separation / 2)
return `rotate(${angle})`
})
const rightGroupLines = mapGroup
.selectAll(".connection-group")
.data(dataOrdered.right)
.enter().append("g")
.attr("transform", (d, i) => {
const separation = (180 - (breakAngle * 2)) / (dataOrdered.right.length - 1)
const isEven = dataOrdered.right.length % 2
let angle = 0
if (i % 2 === 0) angle = (separation * (i / 2)) + (separation / 2)
else angle = -separation * (i / 2)
if (isEven === 1) angle = angle - (separation / 2)
// const angle = (180 - (breakAngle * 2)) * (i / (dataOrdered.right.length - 1)) - (90 - breakAngle)
return `rotate(${angle})`
})
const leftGroupDashes = mapGroup
.selectAll(".connection-group")
.data(dataOrdered.left)
.enter().append("g")
.attr("transform", (d, i) => {
const separation = (180 - (breakAngle * 2)) / (dataOrdered.left.length - 1)
const isEven = dataOrdered.left.length % 2
let angle = 0
if (i % 2 === 0) angle = 180 + (separation * (i / 2)) + (separation / 2)
else angle = 180 - separation * (i / 2)
if (isEven === 1) angle = angle - (separation / 2)
// const angle = - (180 - (breakAngle * 2)) * (i / (dataOrdered.left.length - 1)) - (90 + breakAngle)
return `rotate(${angle})`
})
const rightGroupDashes = mapGroup
.selectAll(".connection-group")
.data(dataOrdered.right)
.enter().append("g")
.attr("transform", (d, i) => {
const separation = (180 - (breakAngle * 2)) / (dataOrdered.right.length - 1)
const isEven = dataOrdered.right.length % 2
let angle = 0
if (i % 2 === 0) angle = (separation * (i / 2)) + (separation / 2)
else angle = -separation * (i / 2)
if (isEven === 1) angle = angle - (separation / 2)
// const angle = (180 - (breakAngle * 2)) * (i / (dataOrdered.right.length - 1)) - (90 - breakAngle)
return `rotate(${angle})`
})
const receivedConnectionsLeft = leftGroupLines.append("path")
.attr("class", "connection-line")
.datum(d => [{"x": 0, "y": 0, "received_bytes": d.received_bytes},
{"x": mapRadius, "y": 0, "received_bytes": d.received_bytes}])
.attr("d", line)
.style("stroke-width", d => `${d[0].received_bytes}px`)
const receivedConnectionsLeftDashes = leftGroupDashes.append("path")
.attr("class", "connection-line-dash")
.datum(d => [{"x": 0, "y": 0, "received_bytes": d.received_bytes},
{"x": mapRadius, "y": 0, "received_bytes": d.received_bytes}])
.attr("d", line)
.style("stroke-width", 4)// d => `${dotScale(d[0].received_bytes)}px`)
// const receivedArrowsLeft = leftGroupDashes.append("path")
// .attr("class", "arrow")
// .attr("d", arrowPathReceived)
// .attr("transform", (d, i) => `
// scale(-1, 1)
// translate(${-mapRadius / 2},0)
// `)
// .style("display", d => d.received_bytes === 0 ? "none" : "block")
const sentConnectionsRight = rightGroupLines.append("path")
.attr("class", "connection-line")
.datum(d => [{"x": 0, "y": 0, "sent_bytes": d.sent_bytes},
{"x": mapRadius, "y": 0, "sent_bytes": d.sent_bytes}])
.attr("d", line)
.style("stroke-width", d => d[0].sent_bytes)
const sentConnectionsRightDashes = rightGroupDashes.append("path")
.attr("class", "connection-line-dash")
.datum(d => [{"x": 0, "y": 0, "sent_bytes": d.sent_bytes},
{"x": mapRadius, "y": 0, "sent_bytes": d.sent_bytes}])
.attr("d", line)
.style("stroke-width", 4) // d => `${dotScale(d[0].sent_bytes)}px`)
// const sentArrowsRight = rightGroupDashes.append("path")
// .attr("class", "arrow")
// .attr("d", arrowPathSent)
// .attr("transform", (d, i) => `translate(${mapRadius / 2}, 0)`)
// .style("display", d => d.sent_bytes === 0 ? "none" : "block")
// const connectedNodeLabels = mapGroup.selectAll(".service-label")
// .data(data)
// .enter().append("text")
// .attr("class", "service-label")
// .attr("x", (d, i) => calcWingPos(d, i).x)
// .attr("y", (d, i) => calcWingPos(d, i).y)
// .style("text-anchor", (d, i) => {
// if (calcWingPos(d, i).x >= -1 && calcWingPos(d, i).x <= 1) return "middle"
// else if (calcWingPos(d, i).x < -1) return "end"
// else return "start"
// })
// .text(d => d.name)
// .style("opacity", mapRadius > 240 ? 1 : 0)
// animating dash connection lines
// USE THIS ONE
receivedConnectionsLeftDashes.style("stroke-dasharray", d => `0 ${mapRadius - mainNodeRadius - 15}`)
.style("stroke-dashoffset", d => (now - 1561663344232) / ((1000 - dashSpeed) / d[0].received_bytes))
// receivedConnectionsLeftDashes.style("stroke-dasharray", d => `1 ${d[0].received_bytes * dashGap}`)
// receivedConnectionsLeftDashes.style("stroke-dasharray", d => `0 ${dashGap}`)
// .style("stroke-dashoffset", (d) => (now - 1561663344232) / ((1000 - dashSpeed) / d[0].received_bytes))
// USE THIS ONE
sentConnectionsRightDashes.style("stroke-dasharray", d => `0 ${mapRadius - mainNodeRadius - 15}`)
.style("stroke-dashoffset", (d) => (1561663344232 - now) / ((1000 - dashSpeed) / d[0].sent_bytes))
// sentConnectionsRightDashes.style("stroke-dasharray", d => `0 ${dashGap}`)
// .style("stroke-dashoffset", (d) => (1561663344232 - now) / ((1000 - dashSpeed) / d[0].sent_bytes))
drawConnectedNodes(leftGroupDashes)
drawConnectedNodes(rightGroupDashes)
drawMainNode(mapGroup)
drawMainNodeLabel(mapGroup)
applyGlobalStyles(svg)
return svg.node()
}