0
나는 이것을 위해 나는의 코드 다운로드 한, 내 자신의 기술 레이더를 만드는 오전에 포인트 ovrelapping을 피하십시오 : 나는 내 요구에 따라 그것을 사용자 정의한 https://github.com/trecenti/tech-radar기술 레이더
합니다. 이 문서에서 "tech-radar.min.js"파일을 수정하여 요구 사항에 맞게 수정했습니다.
이제는 수정이 불가능한 한 가지 점은 서클의 점들이 겹치는 부분입니다. 내 연구에 따라 포인트의 위치는 포인트의 제목과 chance.integer 함수에 따라 결정됩니다.
포인트가 겹치지 않도록 수정하고 싶습니다. 내 인덱스 파일의
코드는 다음과 같습니다
<body>
<div id="radar">
</div>
<div id="ref-table"></div>
</body>
<script>
var adopt = new tr.models.Cycle('Adopt', 0);
var trial = new tr.models.Cycle('Trial', 1);
var assess = new tr.models.Cycle('Assess', 2);
var hold = new tr.models.Cycle('Hold', 3);
var radar = new tr.models.Radar();
var toolsQuadrant = new tr.models.Quadrant('Tools');
var techniquesQuadrant = new tr.models.Quadrant('Techniques');
var platformsQuadrant = new tr.models.Quadrant('Platforms');
var languageFramework = new tr.models.Quadrant('Languages & Frameworks');
toolsQuadrant.add([
new tr.models.Blip('D3', adopt),
new tr.models.Blip('Dependency Management for JavaScript', adopt, true),
new tr.models.Blip('Ansible', trial, true),
new tr.models.Blip('Calabash', trial, true),
new tr.models.Blip('Chaos Monkey', trial, true),
new tr.models.Blip('Gatling', trial),
new tr.models.Blip('Grunt.js', trial, true),
new tr.models.Blip('Hystrix', trial),
new tr.models.Blip('Icon fonts', trial),
new tr.models.Blip('Librarian-puppet and Librarian-Chef', trial),
new tr.models.Blip('Logstash & Graylog2', trial),
new tr.models.Blip('Moco', trial, true),
new tr.models.Blip('PhantomJS', trial),
new tr.models.Blip('Prototype On Paper', trial, true),
new tr.models.Blip('SnapCI', trial, true),
new tr.models.Blip('Snowplow Analytics & Piwik', trial),
new tr.models.Blip('Cloud-init', assess, true),
new tr.models.Blip('Docker', assess, true),
new tr.models.Blip('Octopus', assess),
new tr.models.Blip('Sensu', assess, true),
new tr.models.Blip('Travis for OSX/iOS', assess, true),
new tr.models.Blip('Visual regression testing tools', assess, true),
new tr.models.Blip('Xamarin', assess, true),
new tr.models.Blip('Ant', hold, true),
new tr.models.Blip('Heavyweight test tools', hold),
new tr.models.Blip('TFS', hold)
]);
techniquesQuadrant.add([
new tr.models.Blip('Capturing client-side JavaScript errors', adopt),
new tr.models.Blip('Continuous delivery for mobile devices', adopt),
new tr.models.Blip('Mobile testing on mobile networks', adopt),
new tr.models.Blip('Segregated DOM plus node for JS Testing', adopt, true),
new tr.models.Blip('Windows infrastructure automation', adopt),
new tr.models.Blip('Capture domain events explicitily', trial, true),
new tr.models.Blip('Client and server rendering with same code', trial, true),
new tr.models.Blip('HTML5 storage instead of cookies', trial),
new tr.models.Blip('Instrument all the things', trial, true),
new tr.models.Blip('Masterless Chef/Puppet', trial, true),
new tr.models.Blip('Micro-services', trial),
new tr.models.Blip('Perimeterless enterprise', trial),
new tr.models.Blip('Provisioning testing', trial, true),
new tr.models.Blip('Structured logging', trial, true),
new tr.models.Blip('Bridging physical and digital worlds with simple hardware', assess, true),
new tr.models.Blip('Collaborative analytics and data science', assess),
new tr.models.Blip('Datensparsamkeit', assess, true),
new tr.models.Blip('Development environments in the cloud', assess),
new tr.models.Blip('Focus on mean time to recovery', assess),
new tr.models.Blip('Machine image as a build artifact', assess),
new tr.models.Blip('Tangible interaction', assess, true),
new tr.models.Blip('Cloud lift and shift', hold, true),
new tr.models.Blip('Ignoring OWASP Top 10', hold, true),
new tr.models.Blip('Siloed metrics', hold, true),
new tr.models.Blip('Velocity as productivity', hold, true)
]);
platformsQuadrant.add([
new tr.models.Blip('Elastic Search', adopt),
]);
languageFramework.add([
new tr.models.Blip('Clojure', adopt, true),
]);
radar.setFirstQuadrant(toolsQuadrant);
radar.setSecondQuadrant(techniquesQuadrant);
radar.setThirdQuadrant(platformsQuadrant);
radar.setFourthQuadrant(languageFramework);
var radarGraph = new tr.graphing.Radar(1080, radar);
radarGraph.init('#radar').plot();
var refTable = new tr.graphing.RefTable(radar);
refTable.init('#ref-table').render();
</script>
및 기술에 radar.min.js 파일은 다음과 같습니다 누군가가 그 코드에 대한 아이디어가 있으면 피하기 위해 저를 도와주세요
var tr = tr || {};
tr.models = {}, tr.graphing = {}, tr.util = {}, tr.graphing.Radar = function(t, n) {
function r() {
return Math.round(t/2)
}
function e() {
p.append("line").attr("x1", r()).attr("y1", 0).attr("x2", r()).attr("y2", t).attr("stroke-width", 14), p.append("line").attr("x1", 0).attr("y1", r()).attr("x2", t).attr("y2", r()).attr("stroke-width", 14)
}
function a(t, n) {
var e = (l.sequence(t.length), l.sum(t.length)),
a = l.sum(n);
return r() - r() * a/e
}
function u(t) {
t.forEach(function(n, e) {
p.append("circle").attr("cx", r()).attr("cy", r()).attr("r", a(t, e))
})
}
function c(t) {
var n;
n = Math.round(r()/t.length), t.forEach(function(n, e) {
p.append("text").attr("class", "line-text").attr("stroke", "#000000").attr("stroke-width", "0.3").attr("y", r() + 4).attr("x", r() - a(t, e) + 10).text(n.name()), p.append("text").attr("class", "line-text").attr("stroke", "#000000").attr("stroke-width", "0.3").attr("y", r() + 4).attr("x", r() + a(t, e) - 10).attr("text-anchor", "end").text(n.name())
})
}
function o(t, n, r, e) {
var a, u, c, o, i, s;
return a = 13, u = n - a, c = t - a + 1, o = t + a + 1, i = n + a - a/2.5, s = t + 1 + "," + u + " " + c + "," + i + " " + o + "," + i, (e || p).append("polygon").attr("points", s).attr("class", r).attr("stroke-width", 1.5)
}
function i(t, n, r, e) {
return (e || p).append("circle").attr("cx", t).attr("cy", n).attr("class", r).attr("stroke-width", 1.5).attr("r", 10)
}
function s(t, n, e, u, c) {
var s;
s = n.blips(), t.forEach(function(n, f) {
var d, l, I;
d = a(t, f), l = f == t.length - 1 ? 0 : a(t, f + 1);
var I = s.filter(function(t) {
return t.cycle() == n
});
I.forEach(function(t) {
var a, s, f = t.name().split(""),
I = f.reduce(function(t, n) {
return t + n.charCodeAt(0)
}, 0);
/*var randomNumber = chance.integer({
min: 7,
max: 42
});
var evenNumber = randomNumber * 2;
console.log(evenNumber);*/
chance = new Chance(I * n.name().length * t.number()), a = Math.PI * chance.integer({
min: 13,
max: 85
})/180, s = chance.floating({
min: l + 25,
max: d - 10
});
var m = r() + s * Math.cos(a) * e,
y = r() + s * Math.sin(a) * u,
v = p.append("g").attr("class", "blip-group").attr("id","diagram"+t.number()).attr("onmouseover", "mouseoverfunction("+t.number()+")").attr("onmouseout", "mouseoutfunction("+t.number()+")");
t.isNew() ? o(m, y, c, v) : i(m, y, c, v), h.push(function() {
/* var n;
n = p.append("div").attr("x", m + 15).attr("y", y + 4).attr("class", "blip-name").attr("text-anchor", "left").text(t.name()), v.on("mouseover", function() {
n.style("display", "block")
}).on("mouseout", function() {
n.style("display", "none")
})*/
document.body.innerHTML +='<div class="d3-tip blip-name" id='+t.number()+' style="position:absolute;top:'+(y-15)+'px;left:'+m+'px;">'+t.name()+'</div>';
}), v.append("text").attr("x", m).attr("y", y + 4).attr("id","point"+t.number()).attr("class", "blip-text").attr("text-anchor", "middle").text(t.number())
})
})
}
function f(n) {
function r(t, n, r, e, a) {
p.append("text").attr("x", r).attr("y", e).attr("class", a).attr("text-anchor", n).text(t)
}
r(n.I.name(), "end", t - 10, 10, "first"), r(n.II.name(), "start", 10, 10, "second"), r(n.III.name(), "start", 10, t - 10, "third"), r(n.IV.name(), "end", t - 10, t - 10, "fourth")
}
var d, l, p, h;
return h = [], l = new tr.util.Fib, d = {}, d.svg = function() {
return p
}, d.init = function(t) {
return p = d3.select(t || "body").append("svg"), d
}, d.plot = function() {
var r, a;
r = n.cycles().reverse(), a = n.quadrants(), p.attr("width", t).attr("height", t), u(r), e(), c(r), n.hasQuadrants() && (f(a), s(r, a.I, 1, -1, "first"), s(r, a.II, -1, -1, "second"), s(r, a.III, -1, 1, "third"), s(r, a.IV, 1, 1, "fourth")), h.forEach(function(t) {
t()
})
}, d
}, tr.graphing.RefTable = function(t) {
function n() {
var n = {};
t.cycles().map(function(t) {
return {
order: t.order(),
name: t.name()
}
}).sort(function(t, n) {
return t.order === n.order ? 0 : t.order < n.order ? -1 : 1
}).forEach(function(t) {
n[t.name] = []
});
var r = [],
e = t.quadrants();
return Object.keys(e).forEach(function(t) {
r = r.concat(e[t].blips())
}), r.forEach(function(t) {
n[t.cycle().name()].push(t)
}), n
}
var r, e = {};
return e.init = function(t) {
return r = document.querySelector(t || "body"), e
}, e.render = function() {
var t = n(),
/*e = '<table class="radar-ref-table">';
Object.keys(t).forEach(function(n) {
e += '<tr class="radar-ref-status-group"><td colspan="3">' + n + "</td></tr>", t[n].forEach(function(t) {
var newValue = t.isNew();
if(newValue==true){
var newText = '<span class="newText" style="background-color: rgba(179,32,89,.3);color: #0000;padding: 0 4px;border-radius: 2px; margin-left: 3px;">new</span>';
}else{
var newText = '';
}
e += "<tr onmouseover='mouseoverfunction("+t.number()+")' onmouseout='mouseoutfunction("+t.number()+")' onclick='onclickfunction("+t.number()+")' id=table"+t.number()+"><td>" + t.number() + "</td><td>" + t.name() + newText +"</td></tr>"
e += "<tr class='description-row' id=description"+t.number()+" style='display:none;'><td style='border-top:1px solid;'> </td><td style='border-top:1px solid;'>" + t.description() + "</td></tr>"
})
}),
e += "</table>", r.innerHTML = e*/
e = '<div class="radar-ref-table accordion">';
Object.keys(t).forEach(function(n) {
if(n=='Adopt'){
tooltipText = 'Abopt description';
}
if(n=='Trial'){
tooltipText = 'Trial description';
}
if(n=='Assess'){
tooltipText = 'Assess description';
}
if(n=='Hold'){
tooltipText = 'Hold description';
}
e += '<div class="radar-ref-status-group">' + n + "<div class='tooltip'><span class='tooltip-icon'>?</span><span class='tooltiptext'>"+tooltipText+"</span></div></div>", t[n].forEach(function(t) {
var newValue = t.isNew();
if(newValue=='true'){
var newText = '<span class="newText" style="background-color: rgba(179,32,89,.3);color: #0000;padding: 0 4px;border-radius: 2px; margin-left: 3px;">new</span>';
}else{
var newText = '';
}
e += "<div onmouseover='mouseoverfunction("+t.number()+")' onmouseout='mouseoutfunction("+t.number()+")' id=table"+t.number()+"><a class='accordion-section-title' href='#accordion-"+t.number()+"'>"+t.number()+ ". " + t.name() + newText +"</a>"
e += "<div id='accordion-"+t.number()+"' class='accordion-section-content '><p>"+t.description()+"</p></div></div>"
})
}),
e += "</div>", r.innerHTML = e
}, e
}, tr.models.Blip = function(t, n, r, e) {
var a, u;
return a = {}, u = -1, a.name = function() {
return t
}, a.description = function() {
return e || ""
}, a.isNew = function() {
return r
}, a.cycle = function() {
return n
}, a.number = function() {
return u
}, a.setNumber = function(t) {
u = t
}, a
}, tr.models.Cycle = function(t, n) {
var r = {};
return r.name = function() {
return t
}, r.order = function() {
return n
}, r
}, tr.models.Quadrant = function(t) {
var n, r;
return n = {}, r = [], n.name = function() {
return t
}, n.add = function(t) {
Array.isArray(t) ? r = r.concat(t) : r.push(t)
}, n.blips = function() {
return r.slice(0)
}, n
}, tr.models.Radar = function() {
function t(t) {
t.forEach(function(t) {
t.setNumber(++u)
})
}
function n() {
var t = [];
for (var n in a) a.hasOwnProperty(n) && null != a[n] && t.push(a[n]);
return t
}
function r() {
return n().reduce(function(t, n) {
return t.concat(n.blips())
}, [])
}
var e, a, u;
return u = 0, a = {
I: null,
II: null,
III: null,
IV: null
}, e = {}, e.setFirstQuadrant = function(n) {
a.I = n, t(a.I.blips())
}, e.setSecondQuadrant = function(n) {
a.II = n, t(a.II.blips())
}, e.setThirdQuadrant = function(n) {
a.III = n, t(a.III.blips())
}, e.setFourthQuadrant = function(n) {
a.IV = n, t(a.IV.blips())
}, e.hasQuadrants = function() {
return !!(a.I || a.II || a.III || a.IV)
}, e.cycles = function() {
var t, n;
n = [], t = {}, r().forEach(function(n) {
t[n.cycle().name()] = n.cycle()
});
for (var e in t) t.hasOwnProperty(e) && n.push(t[e]);
return n.slice(0).sort(function(t, n) {
return t.order() - n.order()
})
}, e.quadrants = function() {
return a
}, e
}, tr.util.Fib = function() {
var t = {};
return t.sequence = function(t) {
for (var n = [0, 1], r = 2; t > r; r++) n[r] = n[r - 2] + n[r - 1];
return n
}, t.sum = function(n) {
return 0 === n ? 0 : 1 === n ? 1 : t.sequence(n + 1).reduce(function(t, n) {
return t + n
}, 0)
}, t
};
이 중첩. 내가 자바 스크립트 전문가가 아니기 때문에 전문가가 해결할 수 있습니다.
https://github.com/trecenti/tech-radar에서 코드를 다운로드 할 수 있습니다. 브라우저에서 예제 폴더 안에있는 index.html 파일을 실행하고 점들의 겹침을 피하십시오.
나는 이미 너무 많은 시간을 보냈지만 운이 없다면 위대 할 것입니다.
감사